用於彈出圖片和懸停的CSS

Question

我目前有HTML編寫的CSS代碼，這樣當您將鼠標懸停在其中一個縮略圖上時，會在拇指釘圖像上方彈出一個較大的圖片。我現在有兩個問題：

1）我怎麼能有上述縮略圖默認的白色空間到第一個縮略圖的圖片

2）我怎樣才能得到的圖片，「熬夜」他們有後被徘徊在這樣的地方，它們將只會消失，除非另一個縮略圖被擱置。即使鼠標進入白色空間，仍應顯示最後一個懸停圖像。

我的網站可以在這裏與圖像顯示器被發現在頂部www.ignitionspeed.com 還有什麼我找如果不清楚可以在這裏autoblog.com

在這裏找到一個很好的例子是我使用的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 {}