jquery - 悬停时更改CSS背景图片

Question

您好，我在悬停图像时遇到了一些问题。我只想在将鼠标悬停在文本上时替换我的图像，然后在悬停后返回其原始图像。但是，当我悬停时，图像会发生变化，但悬停后不会返回到原始图像。

这是我的 jquery 代码。

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

	j(function () {

		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)');
           
		  });
		});
        //after hover image goes back to previous image
		j(".click-me .hover-me li .clicker ").css('background-image','url(images/arrow-right.png)');
	});

</script>

希望你能帮助我。谢谢

Answer 1

.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)');
  }
);