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

【问题标题】：How do I make my images in my div change opacity on hover?如何让我的 div 中的图像在悬停时改变不透明度？
【发布时间】：2015-11-20 06:53:30
【问题描述】：

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

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

现在我几乎被困住了。我该如何进行这项工作？我对这一切还是陌生的，所以每一点帮助都表示感谢。

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

【问题讨论】：

您的所有图像都具有相同的大小，并且彼此完全重叠。因此，当您将鼠标悬停在各个部分上时，您将无法让它们改变不透明度。从技术上讲，您只是将鼠标悬停在最后一张图片上，因为这是堆栈中最靠上的图片。
@Lee Ah，这绝对有道理。谢谢你。所以如果我想让这个工作，我必须裁剪每张照片？
好吧，我实际上并不确定是否诚实。这很棘手。您可以查看 SVG 形状，然后对这些形状应用不透明度，因为我不确定，但我认为当您的光标实际触及形状的边界时，它们会悬停，而不是适合它的正方形。跨度>
是的，您需要裁剪所有图像并设置：position: absolute 并使用 css 变换：旋转；）此链接：w3schools.com/cssref/css3_pr_transform.asp

标签： html css hover

【解决方案1】：

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

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

希望你能明白 :)

【讨论】：

很好的例子！太感谢了！ :)

【解决方案2】：

   div img:hover {
 opacity:0.1;
}

我建议你使用类标签，但如果它有效，请告诉我:)

【讨论】：

感谢您的回答！不幸的是，这又只会使nr。 6 改变不透明度。 =(
我认为那是因为您将所有图像都放在同一个位置

【解决方案3】：

正如李所说，你只悬停最后一张图片。

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

【讨论】：

【解决方案4】：

这是一种方法：

:hover #prototype {
    opacity:0.4;
}

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

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

【讨论】：

您可以识别每个 img 并使用该名称而不是 #prototype，以使其对每张图像都有效。