Как предотвратить запуск события Jquery mouseover при перемещении мыши по области прозрачного изображения?

Question

Я использовал код, описанный в приведенном ниже 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 меняет изображение, даже когда мышь находится над прозрачной областью.

Может кто-нибудь предложить какой-нибудь способ, чтобы произошло изменение изображениятолько когда мышь наведена на видимую область изображения?

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/