弹出图片和悬停效果的CSS

Question

弹出图片和悬停效果的CSS

htmlcsshoverthumbnailsblogger

4

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

非常感谢！

- Trae

你需要使用JavaScript。创建一个悬停事件，当缩略图失去焦点时默认第一张图片。 - Teena Thomas

Eric Meyer提供了一些演示，涵盖了通过纯CSS弹出菜单创建类似任务的内容：http://meyerweb.com/eric/css/edge/popups/demo.html和http://meyerweb.com/eric/css/edge/popups/demo2.html（带有图像）。 - feeela

如果解决方案使用JavaScript/jQuery，您是否感到舒适？ - Krish

2个回答

1

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

- Arpit Srivastava

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nebulousGirl · Accepted Answer

我不知道你是否熟悉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 {}