html - 用于弹出图片和悬停的CSS

标签 html css hover thumbnails blogger

我目前有 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>

非常感谢!

最佳答案

如果您熟悉 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 - 用于弹出图片和悬停的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12517758/

相关文章:

javascript - Javascript addEventListener 找到了什么标签

javascript - 重叠页面容器边框与 float div 边框

jquery - 单击寻呼机元素时,自定义 jCarousel 会导致奇怪的循环效果

jquery - 仅显示边框的下半部分

javascript - jquery 触发悬停在具有相同选择器属性的另一个元素上

javascript - 添加内容时动画 div

javascript - 悬停效果点击

css - 无论屏幕尺寸如何,都希望显示页面相同

css - 悬停/链接状态仅在链接的某些区域触发

html - 仅使用 CSS 在父级悬停时显示按钮并在兄弟悬停时隐藏它