当悬停时更改css背景图像

Question

嗨，我有一个悬停图像的小问题。我只是希望我的图像在悬停在文本上时被替换，然后在悬停后返回其原始图像。但是，当我悬停时，图像会发生变化，但悬停后不会恢复到其原始图像。

这是我的jQuery代码。

<script type="text/javascript"> 
 
\t var j = jQuery.noConflict(); 
 

 
\t j(function() { 
 

 
\t \t j(".click-me .hover-me").hover(function() { 
 
\t \t j(".click-me .hover-me ul").slideToggle("fast", function() { 
 
\t \t //change image to new image 
 
      j(".click-me .hover-me li .clicker ").css('background-image','url(images/arrow-down.png)'); 
 
      
 
\t \t }); 
 
\t \t }); 
 
     //after hover image goes back to previous image 
 
\t \t j(".click-me .hover-me li .clicker ").css('background-image','url(images/arrow-right.png)'); 
 
\t }); 
 

 
</script>

希望你能帮助我。由于

Answer 1

试试这个

j(".click-me .hover-me").hover(function() { 
    j(".click-me .hover-me ul").slideToggle("fast", function() { 
     //change image to new image 
     j(".click-me .hover-me li .clicker ").css('background-image', 'url(images/arrow-down.png)'); 
    }, function() { 
     j(".click-me .hover-me li .clicker ").css('background-image', 'url(images/arrow-right.png)'); 
}); 

DEMO

Answer 2

.hover注册一个回调，它不会立即执行。所以在.hover之后没有'之后'。事实上，行

j(".click-me .hover-me li .clicker ").css('background-image','url(images/arrow-right.png)'); 

执行一次回调已经注册后。这是而不是在回调之后调用执行。

实施.hover(handlerIn, handlerOut)：

j(".click-me .hover-me").hover(
    function() { 
    j(".click-me .hover-me ul").slideToggle("fast", function() { 
     //change image to new image 
     j(".click-me .hover-me li .clicker ").css('background-image','url(images/arrow-down.png)');   
    }); 
    }, 
    function() { 
    //after hover image goes back to previous image 
    j(".click-me .hover-me li .clicker ").css('background-image','url(images/arrow-right.png)'); 
    } 
); 

Answer 3

试试这个。

$(selector).hover(inFunction,outFunction); 

    function infunction() 
    { 
    //code to change image on hover 
    } 

    function outFunction() 
    { 
    //code to change image to on leave hover 
    } 

Answer 4

.hover()作品有两个功能参数，每一个动作（鼠标输入，鼠标离开）。我改进了一点代码，以防止选择的重复尽可能：

var j = jQuery.noConflict(); 

j(function() { 
    var $target = j(".click-me .hover-me"); 

    $target.hover(function() { 
     j("ul", this).slideToggle("fast", function() { 
      //change image to new image 
      j(".clicker", $target).css('background-image','url(images/arrow-down.png)'); 

     }); 
    }, function(){ 
     //after hover image goes back to previous image 
     j(".clicker", $target).css('background-image','url(images/arrow-right.png)'); 
    }); 

}); 

Answer 5

您是否尝试过使用mouseenter和mouseleave代替hover？

在了mouseenter做出第一个变化，然后鼠标离开切换回...

https://api.jquery.com/mouseenter/

https://api.jquery.com/mouseleave/

<script type="text/javascript"> 
 
    \t var j = jQuery.noConflict(); 
 

 
    \t j('.click-me .hover-me').mouseenter(function(){ 
 
\t j('.click-me .hover-me ul').slideToggle('fast', function(){ 
 
\t //Change image to new image 
 
\t j('.click-me .hover-me li .clicker').css('background-image', 'url(images/arrow-down.png)'); 
 
\t }); 
 
}); 
 
j('.click-me .hover-me').mouseleave(function(){ 
 
\t j('.click-me .hover-me ul').slideToggle('fast', function(){ 
 
\t //Change image to new image 
 
\t j('.click-me .hover-me li .clicker').css('background-image', 'url(images/arrow-right.png)'); 
 
\t }); 
 
}); 
 

 
    </script>

Answer 6

如果解释问题在

正确

我只想让我的图像在鼠标悬停在文本上时被替换，然后 在悬停后恢复其原始图像。

尝试利用css:hover

var j = jQuery.noConflict(); 
 

 
j(function() { 
 
    j(".click-me .hover-me").hover(function() { 
 
    j(".click-me .hover-me ul").slideToggle("fast"); 
 
    }); 
 
});

.hover-me ul { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: none; 
 
} 
 

 
.clicker { 
 
    display: block; 
 
} 
 
/* default, e.g.; `background:url(images/arrow-right.png)` */ 
 
.clicker { 
 
    background: yellow; 
 
} 
 
/* hover, e.g., `background:url(images/arrow-down.png)` */ 
 
.clicker:hover { 
 
    background: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="click-me"> 
 
    <div class="hover-me"> 
 
    hover 
 
    <ul> 
 
     <li><span class="clicker">clicker</span> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>