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

我使用了下面提到的代码SO答案使用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。

有人可以建议某种方式，只有当鼠标hover在可见图像区域时才会发生图像变化吗？

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/