如何在我的div中使我的图像在悬停时改变不透明度？

Question

我试图让每张图片在悬停时改变不透明度，但我无法使其工作。

当我使用：img：hover {opacity：0.4;}时，只有第6张图片会改变不透明度。 我也尝试过使用＆＃34; #prototype img [src =＆＃34; xxx＆＃34;]：hover＆＃34;试图单独定位每张图片，但这似乎也不起作用。

现在我几乎陷入了困境。我该如何工作？我对这一切仍然很陌生，所以每一点点的帮助都会受到赞赏。

这是小提琴。 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

因为你的图像都是300X300px，所以它们相互重叠：

但是你应该减少所有iamges的大小并放置它们而不重叠：

希望你明白这一点：）

Answer 2

   div img:hover {
 opacity:0.1;
}

我建议您使用class-tags，但请告诉我它是否有效：）

Answer 3

以下是一种方法：

:hover #prototype {
    opacity:0.4;
}

注意该行如何以:hover开头 - 之前没有使用选择器（即类或id或标记）。

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

Answer 4

正如李说的那样，你只能将最后一张图像悬停。

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