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

您可以对此http://jsfiddle.net/u9cYZ/3/

使用map html属性

或

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

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

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

如何防止在透明图像区域上移动鼠标时执行Jquery鼠标悬停事件？

1 个答案: