Javascript 当我将鼠标悬停在一个图像上时，如何使用CSS不透明度使多个图像变亮

我试图使一个网站上有多个图像。我想要的是，当我将鼠标悬停在其中一个图像上时，所有其他图像都会因不透明度而变亮。如果有人能帮我解决这个问题，我将非常感激，因为我已经在谷歌上搜索了很长一段时间，我似乎找不到我想要的答案。谢谢

查看以下内容：

$('.myImg').hover(function(){
   //On hover IN, change the opacity
   $(".myImg").not(this).stop().animate({ "opacity": 0.3 });
}, function(){
   //On hover OUT, reset opacity to default
   $(".myImg").not(this).stop().animate({ "opacity": 1 });
});

---

首先，您需要为所有图像提供一个公共类。接下来，使用jquery，我将有一个悬停事件。在函数内部，您告诉jquery以公共类的所有图像为目标，除了光标当前悬停的图像“.not（this）”。这将改变除当前图像之外的所有图像的不透明度。

您没有给出任何示例代码，因此这里有一个仅用于CSS的方法。您需要将图像放在父容器中，并给它一个类，例如“parent”

HTML

<div class="parent">
    <img src="bla.jpg" />
    <img src="bla.jpg" />
    <img src="bla.jpg" />
    <img src="bla.jpg" />
</div>

这将导致当您将鼠标悬停在其父元素上时，所有图像的不透明度都会发生变化，但将使您正在悬停的图像的不透明度保持不变

---

如果您添加了代码，我们可以为您提供更好/更准确的答案，至少可以显示您的html和您尝试过的内容。

jQuery

回答

CSS

问题。。。也许这会起作用，但不是OP想要的。@gmo why-1和为什么是CSS问题？标题呢<代码>如何使用CSS不透明性…此外，OP问题中没有

jQuery

标记。如果答案是：如果您可以使用jQuery，那么这可能会有所帮助。。。例如（可选）@gmo，fair:），但它是用javascript标记的，不能只用css。公平地说，没有JS是不可能做到的，所以这个答案是正确的。问题是，当鼠标进入父对象时，所有图像都会淡出，即使它不在图像上方。是的，这是唯一的限制，即如果父元素有填充。使用javascript/jQuery会更容易实现，但他要求提供CSS不透明度修复，这是目前我能想到的最好的解决方案。是的。不幸的是，CSS不支持以前的同级选择器。您几乎可以使用

img:hover~img{opacity:.5}

使其工作，但这只影响悬停图像之后的图像。

.parent:hover > img{
    opacity:0.5;
}

.parent > img:hover{
    opacity:1;
}