如何进行图像鼠标悬停效果？
[英]How do I do the image mouse hover effect?
问题描述
当我将鼠标悬停在当前图像上时，如何更改代码以允许其更改图像？
我希望更改的图片位于我的网页body中：
<body>
<!-- Here's myImage!-->
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">
我想这个形象的比方，改变以全新的形象， anotherImage.jpg当你将鼠标悬停在myImage.jpg 。 我试图在别处找到帮助，但没有成功。
3 个解决方案
解决方案1
2 已采纳 2016-04-03 00:08:31
你可以使用javascript的onmouseover事件，但最好尽可能使用CSS。
以下是一个可能解决方案的演示:( 在Codepen上编辑）
* { box-sizing: border-box; padding: 0; margin: 0; } .container { position: relative; width: 600px; height: 400px; margin-left: 50px; } .container:hover img:nth-of-type(2) { opacity: 1; } .container img { position: absolute; top: 0; left: 0; width: 600px; height: 400px; transition: opacity 1s ease-in-out 0s; } .container img:nth-of-type(1) { opacity: 1; } .container img:nth-of-type(2) { opacity: 0; }
<div class="container"> <img src="https://placeimg.com/600/400/animals" /> <img src="https://placeimg.com/600/400/people" /> </div>
基本上，它的工作方式是两个图像通过CSS制作相同的大小，并放在彼此的顶部（这就是绝对定位的目的）。 当用户没有悬停在它上面时，第二个图像的不透明度为0（第nth-of-type(2)选择器选择该类型的第二个元素），因此它不可见，并且第一个图像具有不透明度为1，因此可见。 当用户将鼠标悬停在其上时，第二个被赋予不透明度1，因此它变得完全可见，并且由于它们都是相同的大小并且彼此叠加，所以第一个被第二个覆盖。 这意味着当您将鼠标悬停在图像上时图像会发生变化。
另一个优点是，正如你在演示中看到的那样，它是完全可动画的！ 其他解决方案，例如使用display: none或背景图像不能与CSS过渡一起使用，因为它们不是可动画的属性，但不透明度是可动画的，因此您可以创建此类过渡！ 祝好运！
如果您不理解我对其工作原理的解释，请随时要求澄清！
解决方案2
1 2016-04-03 00:01:51
如果您可以将这两个图像添加到<span>标记中，则可以执行以下操作：
span img:last-child { display: none; } span:hover img:first-child { display: none; } span:hover img:last-child { display: inline-block; }
<span> <img src="http://lorempixel.com/300/150/sports/1"> <img src="http://lorempixel.com/300/150/sports/2"> </span>
或者，对第二个图像使用伪元素。
span:hover img { display: none; } span:hover:after { content: url("http://lorempixel.com/300/150/sports/2"); }
<span> <img src="http://lorempixel.com/300/150/sports/1"> </span>
有关一些基本的淡入/淡出效果的示例，请参阅此jsFiddle 。
解决方案3
0 2016-04-02 23:46:21
在CSS中，第一个类包含第一个图像。 然后第二个类将是类名+悬停。 EX。 .CLASSNAME：悬停{}
#NAME {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#NAME:hover {
background-image: url('LibraryHoverTrans.png');
}
如何在鼠标悬停的图像上显示悬停效果
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.