划分图像和鼠标悬停事件

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")
})