我有一张图片,上面有一个按钮。现在我需要 css 来处理图像不透明度,当我将鼠标悬停在按钮上时应用该图像不透明度。
这是我的尝试。
.wwdimg:hover {
opacity: 0.5;
}
<div>
<img src="http://via.placeholder.com/350x150">
<div><button class="wwdimg"> clickme </button></div>
</div>
发生的是按钮不透明度发生变化而不是图像。
最佳答案
好吧,使用您提供的标记,仅使用 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>
关于html - 在按钮悬停时更改图像不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49186992/