鼠標懸停在圖像上時更改圖像

Question

目前我正在嘗試與我的朋友開發一家在線商店，我們希望圖像;一旦鼠標結束它;更改爲產品的第二張照片。但只要鼠標不再有效，它就需要變回原始圖像。

就像here

謝謝...

Answer 1

請看看這個演示：https://jsfiddle.net/IA7medd/2774m4ob/

HTML：

<div class="images"> 
    <img src="http://www.velt.ch/uploads/images/w254h254_art_49_8.jpg" class="img1"> 
    <img src="http://www.velt.ch/uploads/images/w254h254_art_49_9.jpg" class="img2"> 
</div> 

，我們將用CSS處理：

.images{ 
    width:250px; 
    height:250px; 
    overflow:hidden; 
    position:relative; 
} 
.images img{ 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1; 
} 
.images .img2{ 
    z-index:2; 
    display:none; 
} 
.images:hover .img2{ 
    display:block; 
} 

Answer 2

你會想看看 「鼠標懸停」 事件：

https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

Answer 3

最知名的jQuery插件可用於縮放圖像的部分是cloudzoom，但它不是免費的。

有這個頁面大量圖像縮放插件：

http://netfruits.com/2013/03/jquery-image-zoom-plugins/

一些不錯的自由的：

Easyzoom可能是最接近你需要什麼是免費的，你所提到的。 還有升級變焦，這是免費的，看起來相當不錯。