数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 JavaScript 中使用鼠标事件显示图像悬停效果？
本教程将教会我们如何在 JavaScript 中使用鼠标事件显示图像悬停效果。图像悬停是指当用户将鼠标悬停在图像上时，更改图像样式或整个图像。
为了构建吸引人的用户界面，开发人员经常会在网站和应用程序中添加图像悬停功能。在这里，我们将了解如何以不同的方式应用图像悬停。
鼠标悬停时更改图像样式
在这种方法中，为了创建图像悬停效果，我们将使用 JavaScript 的onmouseover 和onmouseout 事件。当用户将鼠标指针移到图像上时，它将更改图像的样式，而当用户将鼠标指针移出图像时，将对图像应用默认样式。
语法
用户可以按照以下语法在悬停时更改图像样式。
使用 JavaScript onmouseover 和 onmouseout 事件
object.onmouseover = function(){myScript};
object.onmouseout = function(){myScript};使用 addEventListener() 方法
object.addEventListener("mouseover", myScript);
object.addEventListener("mouseout", myScript);算法
步骤 1 - 通过 ID 访问图像元素。
let deomImage = document.getElementById("demo");步骤 2 - 将 onmouseover 事件分配给图像元素 deomImage。
deomImage.onmouseover = function() {
document.demo.style = "height:200px;width:200px";
});步骤 3 - 将 onmouseout 事件分配给图像元素 deomImage。
deomImage.onmouseout = function() {
document.demo.style = "height:100px;width:100px;"
});事件
onmouseover - 每当用户将鼠标悬停在图像元素上时，都会调用此事件。
onmouseout - 当用户将鼠标指针移出图像时，将触发此事件。
示例
使用 JavaScript onmouseover 和 onmouseout 事件
在以下示例中，我们创建了图像元素并为图像提供了默认宽度和高度。我们向图像元素添加了“onmouseover”事件，以便在用户将鼠标悬停到图像上时应用不同的样式。此外，当用户将光标指针移出图像元素时，我们应用了“onmouseout”事件以应用默认样式。
<!DOCTYPE html>
<html>
<body>
<h2> Image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the styles of the image. </h4>
<img src="https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;" id="demo" name="demo" alt="demo Image">
<script>
let deomImage = document.getElementById("demo");
deomImage.onmouseover = function() {deomImage.style = "height:200px; width:200px";};
deomImage.onmouseout = function() {deomImage.style = "height:100px; width:100px";};
</script>
</body>
</html>当您将鼠标悬停在图像上时，图像的尺寸会增大，而当用户将鼠标指针移出图像时，图像的尺寸会减小。
示例
使用 addEventListener() 方法
以下示例演示了如何使用 addEventListener() 方法显示图像悬停效果。此示例显示与上述示例中相同的视觉效果。
<html>
<head>
<title> Show image rollover with mouse event. </title>
</head>
<body>
<h2> Showing image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the styles of the image. </h4>
<img src="https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;"
id="demo" name="demo" alt="demo Image">
<script>
let deomImage = document.getElementById("demo");
deomImage.addEventListener( "mouseover", function () {
document.demo.style = "height:200px; width:200px";
});
deomImage.addEventListener( "mouseout", function () {
document.demo.style = "height:100px; width:100px;"
})
</script>
</body>
</html>在以上输出中，用户可以看到，当他们将鼠标悬停在图像上时，图像的尺寸会增大，而当用户将鼠标指针移出图像时，图像的尺寸会减小。
鼠标悬停时更改图像
在以上方法中，我们只是在用户将鼠标悬停在图像上时更改了图像样式。在本节中，我们将学习如何在用户将鼠标指针移到图像上时更改图像，并在用户将鼠标指针移出图像时将其设置为默认图像。
算法
步骤 1 - 通过 ID 访问图像。
步骤 2 - 使用 addEventListener() 方法将 "mouseover" 事件附加到图像元素。
步骤 3 - 使用 addEventListener() 方法将 "mouseout" 事件附加到图像元素。
示例
在以下示例中，我们将更改图像的“src”属性的值，以在鼠标悬停时替换图像。我们使用了上述 mouseover 和 mouseout 事件来实现我们的目标。
<html>
<head>
<title> Show image rollover with mouse event . </title>
</head>
<body>
<h2> Show image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the image. </h4>
<img src="https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg" style="height:100px;width:100px;"
id="demo" name="demo" alt="demo Image">
<script>
let deomImage = document.getElementById("demo");
deomImage.addEventListener( "mouseover", function () {
document.demo.src = "https://tutorialspoint.com/static/images/logo-footer-b.png";
});
deomImage.addEventListener( "mouseout", function () {
document.demo.src = "https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
});
</script>
</body>
</html>在以上输出中，当用户将鼠标悬停在图像上时，图像将被更改。
对多个图像应用悬停事件
在本节中，我们将创建一个具有两个参数的自定义函数。一个是图像 ID，另一个是图像 src，当事件触发时，我们希望用它替换当前图像源。当鼠标悬停和鼠标移出事件触发时，我们将调用一个函数，并将图像 ID 和新的图像源 URL 作为参数传递。
示例
这样，用户可以通过编写更少的代码行来对多个图像应用图像悬停效果。
<html>
<head>
<title> Show image rollover with mouse events. </title>
</head>
<body>
<h2> Show image rollover with mouse event. </h2>
<h4> Rollover on any image change the default image. </h4>
<img src="https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
OnMouseOver="mouseRollover('demo1','https://tutorialspoint.com/static/images/logo-footer-b.png')"
OnMouseOut="mouseRollover('demo1','https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg')"
style="height:100px;width:100px;" id="demo1" alt="demo Image">
<img src="https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg"
OnMouseOver = "mouseRollover('demo2','https://tutorialspoint.com/static/images/logo-footer-b.png')"
OnMouseOut = "mouseRollover('demo2','https://tutorialspoint.com/python_pillow/images/tutorials_point.jpg')"
style="height:100px; width:100px;" id="demo2" alt="demo Image">
<script>
function mouseRollover( imageId, imageSrc ) {
let image = document.getElementById( imageId );
image.src = imageSrc;
}
</script>
</body>
</html>结论
在本教程中，我们了解了使用鼠标事件实现图像悬停的不同方法。第一种方法是基本方法，其中我们只更改了图像的样式。第二种方法仅在我们需要对单个图像应用鼠标悬停时使用。当用户需要对多个图像应用鼠标悬停时，建议使用第三种方法。
8K+ 浏览量
