Question

我的HTML代码是：

<ul class="nav">
        <li class="nav-one" ><span class="righttab activeright">&nbsp;</span><span class="lefttab activeleft">&nbsp;</span><a href="#featured" class="current">Featured</a></li>
        <li class="nav-two" ><span class="righttab" id="rightnav2">&nbsp;</span><span class="lefttab" id="leftnav2">&nbsp;</span><a href="#core" >Core</a></li>
        <li class="nav-three" ><span class="righttab" id="rightnav3">&nbsp;</span><span class="lefttab" id="leftnav3">&nbsp;</span><a href="#jquerytuts" >jQuery</a></li>
        <li class="nav-four last" ><span class="righttab" id="rightnav4">&nbsp;</span><span class="lefttab" id="leftnav4">&nbsp;</span><a href="#classics" >Classics</a></li>
</ul>

我的jQuery代码是：

    jQuery(".nav-two").hover(function() { 
      $('#rightnav2').css("background-image", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-right.jpg)");  
      $('#leftnav2').css("background-image", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-left.jpg)"); 
    });

当我用鼠标滚动时，这应该会改变背景图像。谁能告诉我我做错了什么？

Answer 1

   jQuery(".nav-two").hover(function() { 
      $('#rightnav2').css("backgroundImage", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-right.jpg)");  
      $('#leftnav2').css("backgroundImage", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-left.jpg)"); 
    });

您可能需要将css属性中的所有' - '替换为驼峰大小写等效。

即。 background-image成为backgroundImage

Answer 2

.hover最常见的用法是将两个函数传递给它：第一个用于鼠标输入，第二个用于鼠标离开。如果只传递一个函数，就像在那里一样，那么它将针对两个事件执行，并且处理程序应该询问Event对象以决定要做什么。因此，如果您的目的是在鼠标悬停时更改背景图像，然后在鼠标移出时恢复，则应提供第二个功能，将背景图像设置为''。

Answer 3

尝试为每个背景创建一个CSS类

$(".nav-two").bind({
    mouseenter: function(){
       $('#leftnav2').addClass('hover1');
       $('#rightnav2').addClass('hover2');
    },
    mouseleave: function(){
       $('#leftnav2').removeClass('hover1');
       $('#rightnav2').removeClass('hover2');
    },
});

或

$(".nav-two").hover(
  function () {
           $('#leftnav2').addClass('hover1');
           $('#rightnav2').addClass('hover2');
  },
  function () {
           $('#leftnav2').removeClass('hover1');
           $('#rightnav2').removeClass('hover2');
  }
);

jQuery没有改变背景

3 个答案: