マウスの上に画像を表示

Question

画像の上にカーソルを置くと、画像の左上にズームアイコンを追加する最も簡単な方法は何でしょうか？

ロールオーバーが背景画像に影響していることがわかりました。

理想的には私が唯一のギャラリー

<div class="gallery"> 
    <a href="#zoomed"><img src="img/hey.png" /></a> 
</div> 

とズームクラスを取得するために、マウスオーバーでjqueryのを使用すると呼ばれるdivの内側の任意の画像に1つのズームのdivや画像

<div class="zoom"><img src="img/zoom_icon.png" /></div> 

とクローンことになるだろうし、

display: block; position: relative; top:0; left:0 

ズームインアイコンを非表示にする場合は、マウスを離してください。

希望はこれが理にかなっています。どんなアドバイスも素晴らしいでしょう。 jQueryを使って

Answer 1

：CSSで

var zoomIcon = $('<img src="path/to/zoom/icon.png" class="zoomIcon" />'); 
$('.zoom').hover(
    function(){ 
     $(this).append(zoomIcon); 
    }, 
    function(){ 
     $(this).find('.zoomIcon').remove(); 
    }); 

：

.gallery { 
    position: relative; 
} 

.gallery > .zoomIcon { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.gallery:hover > .zoomIcon { 
    display: block; 
} 

もちろんこれは、次のマークアップが必要です。

<div class="gallery"> 
    <img src="path/to/zoom/icon.png" class="zoomIcon" /> 
    <!-- other content --> 
</div>