如何防止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/