4

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:

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

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.

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

Here is the CSS I am using for this 

<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

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

4

2 回答 2

1

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

于 2012-09-20T17:57:17.500 回答
1

如果您熟悉 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 {}
于 2012-09-20T18:18:52.793 回答