如何防止Jquery鼠标悬停事件在移动鼠标在传输图像区域执行？ [英] How to prevent Jquery mouseover event from executing on moving mouse on transperent image area?

问题描述

我使用下面描述的代码描述的答案
使用jQuery
更改图像源以更改鼠标上的图像。

I have used code described on below mentioned SO answer Change the image source using jQuery to change image on mouse over.

$(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格式，有一些透明的区域。这意味着我的网站中有非矩形图像。

Problem I am facing is that, my images are in png format which have some transparent areas. That means I have non- rectangular shaped images in my website.

上面的JQuery改变图像src即使鼠标在透明区域。

Above JQuery changes image src even when mouse is over on transparent area.

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

Can someone please suggest some way so that image change occurs only when mouse is hover on visible image area?

推荐答案

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

you can use map html property for this http://jsfiddle.net/u9cYZ/3/

或

您可以使用 css3 mask 属性检查此

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

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

这篇关于如何防止Jquery鼠标悬停事件在移动鼠标在传输图像区域执行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！