我试图让每张图片在悬停时改变不透明度,但我做不到。
当我使用:img:hover {opacity: 0.4;} 只有第 6 张图片改变不透明度。 我也尝试过使用“#prototype img[src="xxx"]:hover"尝试单独定位每张图片,但这似乎也不起作用。
现在我几乎被困住了。我如何使这项工作?我对这一切还很陌生,所以感谢每一点帮助。
这是 fiddle 。 http://jsfiddle.net/jzaeehhq/
HTML:
<div id="prototype" onclick="expand();">
<img style="height: 100px; width: 100px; position: absolute;" src="http://i.imgur.com/MEbxzVL.png" alt="menu1">
<img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/TMZ4hXu.png" alt="menu2">
<img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/VeJ6BR2.png" alt="menu3">
<img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/aIYy0qr.png" alt="menu4">
<img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/QO0Z8TE.png" alt="menu5">
<img style="height: 100px; width: 100px;position: absolute;" src="http://i.imgur.com/uGopItw.png" alt="menu6">
</div>
还有 CSS:
body {
background-color: #F0F0F0;
background-repeat: no-repeat;
background-size: cover;
}
#prototype {
position: absolute;
top: 45%;
left: 47.5%;
background-color: rgba(255,0,0,0.5);
}
最佳答案
关于html - 如何让我的 div 中的图像在悬停时改变不透明度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33802701/