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

Question

我使用了下面提到的 SO 答案中描述的代码 Change the image source on rollover using jQuery在鼠标悬停时更改图像。

$(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。

有人可以建议一些方法，以便只有当鼠标悬停在可见图像区域时才会发生图像变化吗？

Answer 1

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

或

你可以使用 css3 mask 属性检查这个

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

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