导航悬停上的jQuery图像交换

当用户将鼠标悬停在菜单项上时，我尝试使用jQuery在导航上进行图像交换。它需要根据元素的高度加载不同的图像

到目前为止，我有一个在某种程度上有效的方法：

$(document).ready(function() {
    $('a.mainlevel').hover(function() {
        if ($(this).height() > 15) {
            $('a.mainlevel').mouseenter(function() {
                $('a.mainlevel:hover').css('background-image','url(/images/menuHoverBig.gif)');
            });
            $('a.mainlevel').mouseleave(function() {
                $('a.mainlevel').css('background','#505051');
            });
        }
        else {
            $('a.mainlevel').mouseenter(function() {
                $('a.mainlevel:hover').css('background-image','url(/images/menuHover.gif)');
            });
            $('a.mainlevel').mouseleave(function() {
                $('a.mainlevel').css('background','#505051');
            });
        }
    });
});

我遇到的问题是，如果我将鼠标悬停在大小为X的元素上，它会加载正确的图像，但当我将鼠标悬停在大小为Y的元素上时，它会加载X的图像。如果你再次将鼠标悬停在Y上，它会正常工作。回到X，Y图像将一直加载到第二次悬停

我对jQuery不是很了解，所以这可能是显而易见的，但我无法理解

---

干杯

您应该将选择器更改为$（this）。而且您不需要

mouseenter

end

mouseleave

函数

$((function() {
                  $('a.mainlevel').hover(function()
                  {
                    var _image = "url(/images/menuHover.gif)";
                    if ($(this).height()> 15){
                        _image = "url(/images/menuHoverBig.gif)";
                     $(this).css("backround",_image);
                 },
                 function(){
                      $(this).css('background','#505051');

                 });


                });

---

我认为问题在于，在

hover（）

的

mouseenter

和

mouseleave

函数中分配

mouseenter

和

mouseleave

处理程序，并且在设置

css

时也引用所有

.mainlevel

元素，而不仅仅是当前元素。请尝试以下方法：

$(document).ready(function() {
    $('a.mainlevel').hover(
        function() {
            var $el = $(this);      
            var bgImage = 'url(/images/menuHover.gif)';
            if ($el.height() > 15)
                bgImage = 'url(/images/menuHoverBig.gif)');                 
            $el.css('background-image', bgImage);
        },
        function() {
            $(this).css('background', '#505051');
        }
    )
});

---

嗨@Yorgo谢谢你的回复。在参数列表之后尝试你的解决方案“give missing（give missing）”我似乎无法修复它。我修复了它，很抱歉我忘记了）字符