Html 用于弹出图片和悬停的 CSS

CSS for pop-up picture and hovering

提问by Trae

I currently have CSS code with HTML written such that when you hover over one of the thumbnail images a larger picture pops up above the thumb-nailed images. I currently have two problems:

我目前使用 HTML 编写 CSS 代码，当您将鼠标悬停在其中一个缩略图图像上时，会在缩略图图像上方弹出更大的图片。我目前有两个问题：

1.) How can I have the white space above the thumbnails default to the first thumbnail's picture

1.) 如何让缩略图上方的空白区域默认为第一个缩略图的图片

2.) How can I get the pictures to "stay up" after they have been hovered on such that they will only go away unless another thumbnail is hovered on. Even if the mouse enters white space the last hovered image should still be displayed.

2.) 我怎样才能让图片在被悬停后“保持静止”，这样它们只会消失，除非另一个缩略图被悬停。即使鼠标进入空白区域，仍应显示最后悬停的图像。

My website can be found here with the image displayer at the top www.ignitionspeed.comAlso a good example of what I am looking for if it is unclear can be found here autoblog.com

我的网站可以在这里找到，顶部有图像显示器www.ignitionspeed.com如果不清楚，可以在这里找到我正在寻找的一个很好的例子autoblog.com

Here is the CSS I am using for this

这是我为此使用的 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>

And here is the HTML

这是 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>

Thanks so much!

非常感谢！

回答by Arpit Srivastava

Try this for pure CSSand if you want to use jQuery use this.

对于纯 CSS试试这个，如果你想使用 jQuery，请使用这个。

回答by nebulousGirl

I don't if you are familiar with Javascript and jQuery. But you have to use Javascript to achieve your desired effect.

如果您熟悉 Javascript 和 jQuery，我不会。但是你必须使用Javascript来达到你想要的效果。

The most simple way to achieve it is by adding a class on your elements when you hover on them using jQuery.

实现它的最简单方法是在使用 jQuery 将鼠标悬停在元素上时在元素上添加一个类。

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

Then, in your CSS, just modify two of your selectors:

然后，在您的 CSS 中，只需修改您的两个选择器：

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