팝업 사진 및 호버링을위한 CSS

Question

현재 엄지 손톱 이미지 중 하나 위에 마우스를 올려 놓으면 엄지 손톱 이미지 위에 큰 그림이 튀어 나오도록 HTML로 작성된 CSS 코드가 있습니다. 저는 현재 두 가지 문제가 있습니다 : 나는 그들이 가진 후 "깨어"로 사진을 얻을 수있는 방법은 첫 번째 썸네일의 사진

2)에 미리 기본 위의 흰색 공간이 어떻게

1) 다른 엄지 손톱이 씌어 있지 않으면 사라질 것입니다. 마우스가 공백을 입력하더라도 마지막으로 마우스가 놓여진 이미지가 여전히 표시되어야합니다.

내 웹 사이트는 또한 상단 www.ignitionspeed.com 내가 여기에 여기에

autoblog.com 찾을 수 있습니다 불분명 한 경우 무엇을 찾고 좋은 예에서 이미지 디스플레이 어에 여기에서 찾을 수 있습니다

입니다 I가 사용하고있는 CSS 여기

<style type="text/css"> 

.thumbnail{ 
z-index: 0; 
} 

.thumbnail:hover{ 
background-color: transparent; 
z-index: 50; 
} 

.thumbnail span{ /*CSS for enlarged image*/ 
position: absolute; 
display: block; 
left: -1000px; 
visibility: hidden; 
color: red; 
text-decoration: none; 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
border-width: 0; 
padding: 2px; 
} 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 
visibility: visible; 
top: 10px; 
left: 13px; /*position where enlarged image should offset horizontally */ 
overflow:hidden; 
} 

</style> 

그리고는 HTML 너무 많은

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/lexus-lf-cc-concept.html"><img src="http://i.tinyuploads.com/25rBVR.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/25rBVR.jpg" /><br /></span></a> 

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2009-bmw-m3-review-test-drive.html" ><img src="http://i.tinyuploads.com/IGoDa8.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/IGoDa8.jpg" /><br /></span></a> 

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2013-audi-s6-giant-leap-in-performance.html"><img src="http://i.tinyuploads.com/aSwPv9.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/aSwPv9.jpg" /><br /></span></a> 

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2012-lexus-lfa.html"><img src="http://i.tinyuploads.com/Gu1Pey.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/Gu1Pey.jpg" /><br /></span></a> 

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/08/acura-nsx-future-is-already-here.html"><img src="http://i.tinyuploads.com/VJo9IP.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/VJo9IP.jpg" /><br /></span></a> 

<a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2012-jaguar-xkr-s.html"><img src="http://i.tinyuploads.com/REiZ6c.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/REiZ6c.jpg" /><br /></span></a> 

감사합니다!

Answer 1

pure CSS을 사용해보십시오. jQuery를 사용하려면 this을 사용하십시오.

Answer 2

Javascript 및 jQuery에 익숙하지 않은 독자는 아닙니다. 그러나 원하는 효과를 얻으려면 Javascript를 사용해야합니다.

가장 간단한 방법은 jQuery를 사용하여 요소 위에 마우스를 가져 가면 요소에 클래스를 추가하는 것입니다.

$('.thumbnail').mouseover(function() { 
    //Removing any active hover class 
    $('.thumbnail').removeClass('hover'); 
    //Add class for the thumbnail that was just hovered 
    $(this).addClass('hover'); 
}); 

그런 다음 CSS에서, 당신의 선택 자의 두 가지를 수정 :

.thumbnail:hover, .thumbnail.hover {} 
.thumbnail:hover span, .thumbnail.hover span {}