html - 在按钮悬停时更改图像不透明度

Question

我有一张图片，上面有一个按钮。现在我需要 css 来处理图像不透明度，当我将鼠标悬停在按钮上时应用该图像不透明度。

这是我的尝试。

.wwdimg:hover {
  opacity: 0.5;
}

<div>
  <img src="http://via.placeholder.com/350x150">
  <div><button class="wwdimg"> clickme </button></div>
</div>

发生的是按钮不透明度发生变化而不是图像。

Answer 1

好吧，使用您提供的标记，仅使用 CSS 是不可能的...您必须更改一些标记，例如在按钮后放置图像

.wwdimg:hover+img {
  opacity: 0.5;
}

<div>
  <button class="wwdimg">clickme</button>
  <img src="http://via.placeholder.com/350x150">
</div>

如果不允许更改 HTML 部分，则需要使用 javascript

var button = document.querySelector(".wwdimg");
var img = document.querySelector(".image");
button.onmouseover = function() {
  img.style.opacity = ".5";
}
button.onmouseout = function() {
  img.style.opacity = "1";
}

<div>
  <img class="image" src="http://via.placeholder.com/350x150">
  <div><button class="wwdimg">clickme</button></div>
</div>