Question

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

这是我的尝试。

＆＃13;

.wwdimg:hover {
  opacity: 0.5;
}

＆＃13;

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

＆＃13;

按钮不透明度会改变而不是图像。

Answer 1

使用您提供的标记，仅使用CSS无法实现...您必须更改一些标记，例如在按钮后放置图像

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只有当a）按钮和图像共享相同的父元素并且b）图像位于按钮之后，才有可能。

.image-button {
  display: inline-block;
  position: relative;
}

.image-button button {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 10px;
  z-index: 99;
}

.image-button img {
  display: block;
  position: relative;
  transition: opacity .4s ease-in-out;
}

.image-button button:hover + img {
  opacity: .5;
}

<div class="image-button">
  <button type="button">Hover me</button>
  <img src="http://placebear.com/400/180"/ >
</div>

Answer 3

以下是工作小提琴的链接：
https://jsfiddle.net/Netven/akaqoaz0/17/

＆＃13;

    $('.wwdimg').mouseover(function(){
        $('#img_holder').css("opacity", "0.2");
    });
      $('.wwdimg').mouseout(function(){
        $('#img_holder').css("opacity", "1");
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="img_holder" width="200px" height="auto" src="https://images.dreamstream.com/prodds/prddsimg/OM_pasteIt8_2_2018_10_0_27495346.jpeg"> 
<div><button class="wwdimg"> clickme </button></div>
</div>

＆＃13;

在按钮悬停中更改图像不透明度

3 个答案: