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
}

执行此操作要更改您使用的图像精灵的背景位置，如果您很懒，您可以完全更改图像，而不必担心精灵。您会发现此方法页面尺寸更小，兼容性也更好。

Answer 2

这是因为在 else 块第一次运行之前，您不会第二次调用 hover。在 $(document).ready 中设置所有事件处理程序，然后就可以开始了。

Answer 3

你应该简化你的代码 - 试试这个

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

Answer 4

工作示例位于： http://jsfiddle.net/HNGMT/

**该示例使用两个 div 来演示具有 active 类和不具有 active 类的区别。课程的 HTML 也仅用于演示目的。 contact 类的 jQuery 选择器将被修改以反映 id 选择器。

HTML：

<div class="contact"><img src="/contact.png" alt="contact inactive" /></div>
<div class="contact active"><img src="/contact.png" alt="contact active" /></div>

JavaScript：

$(".contact").hover(function () {
    $(this).find("img").attr({src:"contact_hover.png", alt:"contact hover"});
}, function(){
    var ele = $(this);
    if(!ele.hasClass("active")){
        ele.find("img").attr({ src:"contact.png", alt:"contact inactive"});
    }
});