仅更改所有图像的不透明度，悬停的一张除外

Question

这是我的问题：

我在一个 div 中有几张图片，我希望当其中一张图片悬停时，所有其他图片都变得不透明。 问题是我在这个 div 中也有文本，我希望当我在这个文本上使用 hover 时，图像的不透明度为 1。

我试图这样做：

 .dimImagesHover:hover img { transition: 0.25s; opacity: 0.3; }.dimImagesHover img:hover { opacity: 1; }

 <div class="dimImagesHover"> <img src="//placehold.it/60x60/0bf" alt="demo 1"> <img src="//placehold.it/60x60/fb0" alt="demo 2"> Here is a test, When I hover this texte. I need to have my image in opacity 1. <img src="//placehold.it/60x60/bf0" alt="demo 3"> </div>

我真的尝试了很多不起作用的东西，所以如果您有解决方案或建议，请不要犹豫并提前感谢。

再见，莱奥

Answer 1

您应该使用以下内容：

 .dimImagesHover:hover img { transition: 0.25s; opacity: 0.3; }.dimImagesHover img:hover { opacity: 1; }.dimImagesHover p:hover img { transition: 0.25s; opacity: 1; }

 <div class="dimImagesHover"> <img src="//placehold.it/60x60/0bf" alt="demo 1"> <img src="//placehold.it/60x60/fb0" alt="demo 2"> <p>Here is a test, When I hover this texte. I need to have my image in opacity 1.</p> <img src="//placehold.it/60x60/bf0" alt="demo 3"> </div>

这样，当您在文本（<p> 标签）上 hover 时，您的图像的不透明度应该为 1。

Answer 2

使用一点 JavaScript 您可以实现...

 var elements = document.getElementsByClassName('dimImagesHover') for (var i = 0; i < elements.length; i++) { elements[i].onmouseover = function( e ){ //check if it is an image that has been hovered // and add a class to parent if(e.target.tagName == 'IMG'){ this.classList.add("imgHovered"); } } elements[i].onmouseout = function( e ){ this.classList.remove("imgHovered"); } }

 .dimImagesHover img { transition: 0.25s; }.dimImagesHover.imgHovered img { opacity: 0.3; }.dimImagesHover img:hover { opacity: 1; }

 <div class="dimImagesHover"> <img src="/" alt="demo 1"> <img src="/" alt="demo 2"> Here is a test, When I hover this texte. I need to have my image in opacity 1. <img src="/" alt="demo 3"> </div>