為什么我的跨度懸浮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