如何防止Jquery mouseover事件在透明图像区域上移动鼠标时执行？

我已经使用了下面提到的SO答案中描述的代码使用 jQuery 更改鼠标悬停时的图像源 https://stackoverflow.com/questions/540349/change-the-image-source-using-jquery/540355#540355更改鼠标悬停时的图像。

$(function() {
    $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", src);
    });
});

我面临的问题是，我的图像是 png 格式，有一些透明区域。这意味着我的网站中有非矩形图像。

即使鼠标悬停在透明区域上，上面的 JQuery 也会更改图像 src。

有人可以建议某种方法，以便仅当鼠标悬停在可见图像区域时才会发生图像更改吗？

您可以使用maphtml 属性为此http://jsfiddle.net/u9cYZ/3/ http://jsfiddle.net/u9cYZ/3/

or

您可以使用css3 mask财产检查这个

http://www.webkit.org/blog/181/css-masks/ http://www.webkit.org/blog/181/css-masks/

http://girliemac.com/blog/2010/09/20/201/ http://girliemac.com/blog/2010/09/20/201/