Question

当用户将鼠标悬停在菜单项上时，我正在尝试使用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并不是那么认真，所以它可能是显而易见的，但我无法解决它。

干杯

Answer 1

你应该将选择器更改为$（this）。而且您也不需要mouseenter结束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');

                 });


                });

Answer 2

我认为问题在于您在mouseenter的{{1}}和mouseleave函数中分配了mouseenter和mouseleave个处理程序，而您是在设置hover()时，还会引用所有.mainlevel元素，而不仅仅是当前元素。试试这个：

css

导航悬停时jQuery图像交换

2 个答案: