Question

我正在尝试创建一个包含多个图像的网站。我想要的是当我将鼠标悬停在其中一个图像上时，所有其他图像都会变得更加不透明。如果有人可以帮我解决这个问题，我会非常感激，因为我已经玩了很长一段时间了，我似乎无法找到答案。感谢

Answer 1

检查出来：

$('.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使用公共类来定位所有图像，除了光标当前正在悬停的图像＃34; .not（this）＆＃34;。这将改变除当前图像之外的所有图像的不透明度。

Answer 2

嗯，你没有给出任何示例代码，所以这里只是一个CSS方法。您需要将图像放在父容器中，并为其提供一个类，例如＆＃34; parent＆＃34;。

<强> HTML

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

<强> CSS

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

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

这将导致您的所有图片＆＃39;当您将鼠标悬停在其父元素上时，不透明度会发生变化，但会保留您在其上方悬停的图像的不透明度。

Demo

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

2 个答案: