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

IF ELSE Hover statement only works on second hover

本文关键字：适用于 第二次 悬停 语句 ELSE Hover IF      更新时间：2023-09-26

我有一个菜单，当你滚动图像时，图像会发生变化，除非图像附加了一个活动类。我的问题是，图像只在第二次翻滚时发生变化，而不是第一次。有什么想法吗？

$("#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" )
         });
    }
});

你不应该用jQuery来做这件事，真的没有必要。请阅读CSS图像精灵并使用CSS悬停选择器，如下所示：

#contact {
    background: url(/url/of/img) no-repeat;
}
#contact:hover { 
    background-position: ; // Change to desired image
}

这样做可以改变你使用的图像精灵的背景位置，如果你懒惰的话，你可以改变图像的位置，而不是麻烦精灵。您会发现这种方法的页面大小要轻得多，而且兼容性。

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

您应该简化代码-试试这个

$("#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" )
   }
});

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

**该示例使用两个div来演示具有active类的div和不具有类的div之间的区别。cours的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"});
    }
});
相关文章：