Question

我有一个菜单，当您翻转图像时图像会发生变化，除非图像附加了活动类。我的问题是图像只在SECOND ROLL上发生变化而不是第一次。任何想法为什么会这样。

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

这样做是为了改变你使用的图像精灵的背景位置，如果你很懒，你可以改变图像altogther而不是用精灵打扰。您会发现此方法页面大小更轻，兼容性。

Answer 2

这是因为你没有第二次调用hover，直到else-block第一次运行。在$(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类和一个没有的一个之间的区别。 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"});
    }
});

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

4 个答案: