0

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

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

4 回答 4

2

你不应该用 jQuery 做这个，真的没有必要。请阅读CSS Image sprites并使用 css hover 选择器，如下所示：

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

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

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

于 2011-08-10T16:48:16.467 回答
0

hover这是因为在 else 块第一次运行之前，您不会进行第二次调用。将所有事件处理程序设置在 中$(document).ready，您应该一切顺利。

于 2011-08-10T16:21:18.237 回答
0

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

$("#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" )
   }
});
于 2011-08-10T16:23:34.417 回答
0

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

active**该示例使用两个 div 来演示一个带有 class of和一个没有class of 的区别。course 的 HTML 也仅用于演示目的。并且该类的 jQuery 选择器contact将被修改以反映 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"});
    }
});
于 2011-08-10T16:41:48.133 回答