划分圖像和鼠標懸停事件

Question

我有一個帶有圖像的網站，其中一些有一個“游戲”（一個div絕對定位，並通過jQuery上的點擊事件管理）。

在某些圖像中，我必須在鼠標懸停在圖像上時更改不透明度。

當圖像同時具有“播放”和不透明度變化時，會發生這種情況（將鼠標放在“播放”div上）： http ： //jsfiddle.net/S53b5/

我嘗試過不同的解決方案只有CSS或使用jQuery，但任何工作:(

謝謝！

Answer 1

試試這個演示

   $("img").mouseout(function(){
     $(".play").css("opacity","1")
    }).mouseover(function(){
     $(".play").css("opacity",".5");
    });

更新了演示2

$("img").mouseout(function(){
        $(".play").css("opacity","1");
         $(this).css("opacity",".1");
    }).mouseover(function(){
        $(".play").css("opacity",".5");
        $(this).css("opacity","1");
    });

$(".play").mouseover(function(){
        $(this).css("opacity","1");
        $("img").css("opacity","1");
    });

Answer 2

$("img").mouseover(function(){
    $(this).css("opacity",".8");
})

Answer 3

$("#(yourimageid)").mouseover(function(){
$(this).css("opacity","0.7")
})