当我将鼠标悬停在其上方的元素上时，我希望我的背景图像的不透明度变为.2

Question

所以我有一个电影海报图片和一个播放图标。当我将鼠标悬停在位于其上的播放图像/图标上时，如何降低海报的不透明度？

Answer 1

您可以使用jQuery执行此操作，如下所示：

$(function() {
  $('#myImage').hover(function() {
    // changing the opacity of the poster when hovering over image
    $('#myPoster').css('opacity', '0.2');
  }, function() {
    // resetting opacity when mouse leaves image
    $('#myPoster').css('opacity', '1.0');
  });
});

Answer 2

你不能只用css来做。你需要JS事件。

检查此代码段

＆＃13;

＆＃13;

clean -d

＆＃13;

function changeOpacity(){
  document.getElementById('video').style.opacity = 0.5;
}

＆＃13;

#play {
  width: 50px;
  height: 50px;
}

#video {
  width: 300px;
  height: 300px;
}

＆＃13;

＆＃13;

＆＃13;

这样您可以根据需要更改不透明度。

享受：D

注意：您可以使用onmouseout事件使图像（或视频）的不透明度恢复正常。