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

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>

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

Change opacity on all images ONLY except hovered one

html

javascript

css

image

hover