Изменение 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 сделать первое изменение, а затем на MouseLeave переключить его обратно ...

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>