Question

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

这是我的jquery代码。

＆＃13;

<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>

＆＃13;

希望你能帮助我。感谢

Answer 1

.hover注册一个回调函数，它不会立即执行它。所以没有＆＃39;之后＆＃39;致.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 2

试试这个

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 3

.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 4

试试这个。

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

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

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

Answer 5

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

在mouseenter上进行第一次更改，然后在mouseleave上将其切换回来......

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

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

＆＃13;

    <script type="text/javascript">
    	var j = jQuery.noConflict();

    	j('.click-me .hover-me').mouseenter(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)');
	});
});
j('.click-me .hover-me').mouseleave(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-right.png)');
	});
});

    </script>

＆＃13;

Answer 6

如果在

正确解释问题

我只是希望在将鼠标悬停在文本上时替换我的图像在悬停后返回原始图像。

尝试使用css :hover

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

悬停时更改css背景图片

6 个答案: