如何防止jQuery的鼠标悬停事件从上透明单位图像区域移动鼠标执行？

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/