Question

我有一个带有图片的网站，其中一些网站上有一个“播放”（一个div绝对定位并通过jQuery点击事件进行管理）。

在某些图像中，我必须在鼠标悬停在图像上时更改不透明度。

当图像同时具有“播放”和不透明度变化时，会发生这种情况（将鼠标放在“播放”div上）：http://jsfiddle.net/S53b5/

我尝试过不同的解决方案，只使用CSS或使用jQuery，但任何工作都有效：（

谢谢！

Answer 1

试试这个demo

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

更新了Demo2

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

划分图像和鼠标悬停事件

3 个答案: