使用jquery在我的電腦中更改圖像

Question

當鼠標懸停在鼠標上方時，我需要在我的代碼中將現有圖像與我的計算機中的另一個圖像進行切換，並在鼠標懸停在其上時放回舊圖像。

這是jQuery的代碼中，我有這方面迄今：

$('.first-image').mouseover(function(){ 
    $(this).toggleClass('second-image');  
}); 
$('.second-image').mouseover(function(){ 
    $(this).toggleClass('first-image'); 
}); 

我不知道如何處理，這樣就不會相互之間進行切換圖片更換toggleClass。我不希望它們兩個都在鼠標懸停在圖像上時切換圖像，我只需要其中一個圖像切換到我的計算機中的其他圖像，而不會讓它們交替出現。

Answer 1

first-image是一個css類，你可以用你自己的css類替換它。

<style> 
.myimage{ 
    background-image: url(nameofmyimage.png); 
} 
</style> 


<script> 
$('.first-image').mouseover(function(){ 
    $(this).toggleClass('myimage'); 
}); 
$('.second-image').mouseover(function(){ 
    $(this).toggleClass('myimage'); 
}); 
</script> 

Answer 2

您可以使用類似與上述圖像此

<style> 
.yourfirst-image{ 
    background-image: url(yourfirstimage.jpeg); 
} 
.yoursecond-image{ 
    background-image: url(yoursecondimage.jpeg); 
} 

</style> 
<script> 
$(.first-image).mouseover(function(){ 
     $(this).toggleClass(.yoursecond-image); 
    }); 
    $(.first-image).mouseout(function(){ 
     $(this).toggleClass(.yourfirst-image); 
    }); 
</script>