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

Question

这是我的问题：

我在一个 div 中有几张图片，我希望当其中一张图片悬停时，所有其他图片都变得不透明。问题是我在这个 div 中也有文本，我希望当我将鼠标悬停在这个文本上时，图像的不透明度为 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>

这样，当您将鼠标悬停在文本（

标签）上时，您的图像的不透明度应该为 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>