マウスが画像の上にある間に画像を変更

Question

現時点では、私は友人とオンラインショップを開発しようとしています。一度マウスが上に来ると、製品の2番目の写真に変更されます。しかし、マウスがそれ以上上になければ、元の画像に戻す必要があります。

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はおそらく、あなたが述べたようにそれは、自由である必要が何に最も近いです。 無料で見栄えの良いエレベータズームもあります。