如何让 div 中的图像在悬停时更改不透明度？

Question

我试图让每张图片在悬停时改变不透明度，但我做不到。

当我使用时：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);
}

Answer 1

   div img:hover {
 opacity:0.1;
}

我建议您使用 class-tags，如果它有效请告诉我:)

Answer 2

这是一种方法：

:hover #prototype {
    opacity:0.4;
}

请注意该行是如何以 :hover 开头的——在它之前没有使用选择器（即 class 或 id 或标签）。

JSFiddle：http://jsfiddle.net/jzaeehhq/2/

Answer 3

因为你的图片都是300X300px，所以互相重叠了：

但是你应该缩小所有图片的大小，并在不重叠的情况下放置它们：

希望你明白了:)

Answer 4

正如 Lee 所说，您只悬停在最后一张图片上。

尝试使用地图元素 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map。

如何让 div 中的图像在悬停时更改不透明度？

How do I make my images in my div change opacity on hover?

html

css

hover