爲什麼圖像與懸停

Question

$(function() { 
    $(".btn").on("mouseover",function(){ 
     $(this).attr("src", $(this).attr("src").replace("images", "images/hover")); 
    }); 

    $(".btn").on("mouseleave",function(){ 
     $(this).attr("src", $(this).attr("src").replace("images/hover", "images")); 
    }); 
}); 

上面的代碼偶爾打破是我改變形象時，按鈕上的用戶懸停，就可以當用戶點擊，它會重定向到其他頁面的方式。而html元素是這樣的：

<a href="product.php"><img class="btn" src="images/index_03.gif" /></a> 

的問題是，我可以肯定的路徑是正確的，但是當用戶點擊該按鈕，在加載下一個頁面或在某些情況下的時候，當我懸停在圖像上，懸停的圖像沒有顯示，但斷開的鏈接，爲什麼它是如何修復它？感謝您的幫助

Answer 1

$(this).attr("src", $(this).attr("src").replace("images/hover", "images")); 

此代碼將重新加載圖像，每次（或從緩存）。

因此，在頁面加載期間，由於其他數據也在同時加載，因此onhover映像加載速度會變慢或中斷。

我建議你應該同時加載兩個圖像在相同的位置，並顯示/隱藏它們懸停以獲得更快的結果。

Answer 2

使用CSS sprites而不是javascript調用將消除鼠標懸停閃爍，並減少您的網站所需的http請求總數（使其加載速度更快）。

通過使用css'：hover'pseudo element來改變圖像的'clip'屬性（在IE6及更高版本中支持），您可以實現相同的'鼠標懸停'功能。

查看這些CSS技巧文章： CSS Sprites: What They Are, Why They’re Cool, and How To Use Them。
CSS Sprites with Inline Images