html – 用于d出图片和悬停的CSS

概述我目前使用 HTML编写的CSS代码,当您将鼠标悬停在其中一个缩略图图像上时,拇指钉图像上方会d出更大的图片.我目前有两个问题： 1.)如何将缩略图上方的空白区域默认为第一个缩略图的图片 2.)我怎样才能让这些图片在徘徊之后“熬夜”,这样只有在另一个缩略图悬停的情况下它们才会消失.即使鼠标进入空白区域,仍应显示最后悬停的图像. 我的网站可以在这里找到顶部www.ignitionspeed.com的 我目前使用 HTML编写的CSS代码,当您将鼠标悬停在其中一个缩略图图像上时,拇指钉图像上方会d出更大的图片.我目前有两个问题：

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

非常感谢！

解决方法 如果您熟悉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 {}

总结

以上是内存溢出为你收集整理的html – 用于d出图片和悬停的CSS全部内容，希望文章能够帮你解决html – 用于d出图片和悬停的CSS所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。