當懸停時更改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>