为什么我的跨度悬浮CSS不能正常工作？

Question

将鼠标移到图像缩略图（即ul .thumbs所有图像）上时，您应该看到一个小框，其中显示了嵌入在图像链接中的跨度中的文本。 这不会发生。 为什么以及如何解决？

http://jsfiddle.net/raj4dev/hbyg43d9/3/

HTML

<body>
    <div id="container">
        <h1>css slide show</h1>
        <ul class="thumbs">
            <li><a href="#slide-1"><img src="img/thumb1.jpg"><span>Img 1</span></a></li>
            <li><a href="#slide-2"><img src="img/thumb2.jpg"><span>Img 2</span></a></li>
            <li><a href="#slide-3"><img src="img/thumb3.jpg"><span>Img 3</span></a></li>
        </ul>

        <ul class="slides">
            <li class="first" id="slide-1"><img src="img/slide1.jpg"></li>
            <li id="slide-2"><img src="img/slide2.jpg"></li>
            <li id="slide-3"><img src="img/slide3.jpg"></li>
        </ul>

    </div>
</body>

CSS

*{
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    list-style: none;
}

body{
    background: #465c8f url(../img/bg-image.jpg) repeat-x;
    font-family: 'Arial', 'sans-serif';
}

#container{
    width: 718px;
    overflow: hidden;
    margin: 40px auto;
}

h1{
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

ul.thumbs li{
    float: left;
    margin-bottom: 10px;
    margin-right: 9px;
}

ul.thumbs a{
    display: block;
    position: relative;
    width: 85px;
    height: 55px;
    border: 4px solid transparent;
    font: bold 12px/25px Arial, sans-serif;
    color: #515151;
    text-decoration: none;/*remove underlines*/
    text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}

ul.thumbs img{
    border: #333 solid 4px;
}

ul.slide{
    overflow: hidden;
    clear: both;
    border: #333 solid 4px;
}

ul.slides, ul.slides li, ul.slides a, ul.slides img{
    width: 705;
    height: 350px;
    position: relative;
}

ul.thumbs li a:hover span{
    position: absolute;
    z-index: 101;
    bottom: -30px;
    left: -22px;
    display: block;
    width: 100px;
    height: 25px;
    text-align: center;
    border-radius: 3px;
}

Answer 1

这是一种创建幻灯片的聪明方法，不需要JavaScript或jQuery，效果很好。

CSS中您的一个类名中有一个错字，这造成了一些混乱（将ul.slide更改为ul.slides ）。

我猜想您想要做的是在悬停时显示span ，这意味着首先需要使用display: none隐藏span display: none ，并且我为ul.thumbs li a span添加了新的CSS规则ul.thumbs li a:hover span 。 （注意，您也可以在li上使用:hover并获得类似的效果。）

我还更改了浮动元素的样式。 如果在ul.thumbs添加了overflow: auto ，则所有浮点数都包含在父块中，然后可以将底边距添加到父ul而不是li ，这可以在某些设计中确定。

有关缩略图的图像，请参见ul.thumbs img ，我将高度设置为100％，并让缩略图缩放以适应继承的高度（来自li ），并使用vertical-align: top如果要删除图像下方的空白）。

我还在li上设置了with，而不是a ，但是区别的确取决于我们设计的细节。

在大多数情况下，您的CSS仍然是不错的。 唯一缺少的概念是span的初始隐藏，以便它可以在悬停时显示。

注意：我没有特别注意span的宽度及其确切位置。 如果您有很多文本（例如标题），则100％的宽度是不够的（我将其设置为适合li容器的方式）。 您可以根据需要进行更改。

 *{ margin: 0; padding: 0; border: none; outline: none; list-style: none; } body { background: #465c8f url(../img/bg-image.jpg) repeat-x; font-family: 'Arial', 'sans-serif'; } #container{ width: 718px; overflow: hidden; margin: 40px auto; } h1{ color: #fff; text-align: center; margin-bottom: 20px; } ul.thumbs { border: 1px dotted white; /* for demo only... */ overflow: auto; margin-bottom: 10px; } ul.thumbs li{ float: left; width: 85px; height: auto; margin-right: 9px; border: 1px dotted white; /* for demo only... */ } ul.thumbs a { display: block; position: relative; border: 4px solid transparent; font: bold 12px/25px Arial, sans-serif; color: #515151; text-decoration: none;/*remove underlines*/ text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15); } ul.thumbs img{ vertical-align: top; /* if you need to remove whitespace below image */ height: 100%; border: #333 solid 4px; } ul.slides { /* fix typo in class name */ overflow: hidden; clear: both; border: #333 solid 4px; } ul.slides, ul.slides li, ul.slides a, ul.slides img{ width: 705; height: 350px; position: relative; } ul.thumbs li a span { /* Need to provide a default styling for the span... */ position: absolute; bottom: 0px; left: 0px; display: block; width: 100%; height: auto; text-align: center; border-radius: 3px; background-color: white; display: none; } ul.thumbs li a:hover span { display: block; }

 <div id="container"> <h1>css slide show</h1> <ul class="thumbs"> <li><a href="#slide-1"><img src="http://placehold.it/60x60"><span>Img 1</span></a></li> <li><a href="#slide-2"><img src="http://placehold.it/60x60"><span>Img 2</span></a></li> <li><a href="#slide-3"><img src="http://placehold.it/60x60"><span>Img 3</span></a></li> </ul> <ul class="slides"> <li class="first" id="slide-1"><img src="http://placehold.it/240x120"></li> <li id="slide-2"><img src="http://placehold.it/180x120"></li> <li id="slide-3"><img src="http://placehold.it/120x120"></li> </ul> </div>

Answer 2

您的悬停样式可以正常工作，但是您在ul.slides上有ul.thumbs ，因此:hover操作不会传递给锚。

以后，请在您关于StackOverflow的问题中共享相关代码段，以实现后代和可搜索性。

Answer 3

只需添加z-index：2; 到您的ul.thumbs，一个类似coryward的CSS表示您的链接位于某物下方，因此您无法将其悬停在上面，需要将其置于顶部，以便将其悬停在上面。

为什么我的跨度悬浮CSS不能正常工作？

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-12-11 12:17:07

解决方案2
0 2015-12-11 01:52:29

解决方案3
0 2015-12-11 03:27:05

为什么我的跨度悬浮CSS不能正常工作？

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-12-11 12:17:07

解决方案2 0 2015-12-11 01:52:29

解决方案3 0 2015-12-11 03:27:05

解决方案1
1 已采纳 2015-12-11 12:17:07

解决方案2
0 2015-12-11 01:52:29

解决方案3
0 2015-12-11 03:27:05