javascript - IF ELSE Hover 语句仅适用于第二次悬停

Question

我有一个菜单，当您将鼠标悬停在图像上时，图像会发生变化，除非图像附加了事件类。我的问题是图像仅在第二次滚动时发生变化，而不是第一次时发生变化。任何想法为什么会这样。

$("#contact").hover(function () {
    if ($("#contact").is(".active")) {
        $("#contact img").attr("src","Images/Menu/contact_hover.png" )
    }
    else {
        $("#contact").hover(function () {
                $("#contact img").attr("src","Images/Menu/contact_hover.png" )
            },
            function() {
            $("#contact img").attr("src","Images/Menu/contact.png" )
         });
    }
});

Answer 1

您不应该使用 jQuery 来执行此操作，确实没有必要。请阅读CSS Image sprites并使用 CSS 悬停选择器，如下所示:

#contact {
    background: url(/url/of/img) no-repeat;
}

#contact:hover { 
    background-position: ; // Change to desired image
}

这样做是为了更改您使用的图像 Sprite 的背景位置，如果您很懒，您可以完全更改图像，而不必担心 Sprite 。您会发现此方法页面尺寸更小，兼容性也更好。