마우스 위에 이미지 표시

Question

이미지 위로 마우스를 가져 가면 이미지의 왼쪽 상단에 확대/축소 아이콘을 추가하는 가장 쉬운 방법은 무엇입니까?

롤오버가 배경 이미지에 영향을주고 있음을 발견했습니다.

이상적으로 나는 단지 한 줌 사업부 및 이미지

<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 

확대/축소 아이콘을 숨길 때.

희망적입니다. 어떤 충고라도 잘 될 것입니다. jQuery로

Answer 1

:

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

CSS로는 :

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