我想讓我的背景圖片的不透明度變成.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事件。

檢查這個片段進行

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

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

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

<img src="https://i.stack.imgur.com/kZvwc.png" id="play" onmouseover="changeOpacity();" /> 
 
<br/> 
 
<img src="https://i.stack.imgur.com/NAM35.jpg" id="video" />

這樣你可以改變透明度根據自己的需要。

享受：d

注意：您可以使用onmouseout事件，使圖像（或視頻的）透明度恢復正常就這樣。