在鼠標上顯示圖像

Question

將鼠標懸停在圖像上方時，最簡單的方法是在圖像左上角添加縮放圖標。

所有我發現與翻車正在影響背景圖像。

理想我只會讓1個變焦股利和圖像

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

，並克隆了一個任何圖像稱爲畫廊

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

而且使用jQuery與鼠標懸停DIV中得到放大級和正確定位：

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

而且當你mouseout隱藏縮放圖標。

希望這是有道理的。任何建議都會很棒。

Answer 1

使用jQuery：

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

使用CSS：

.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>