html - CSS 在 :hover 上不工作

Question

首先，这是一个Reference到我想做的事情，基于我的代码。

我在使用 css 时遇到了一些麻烦，我有一个返回带有图像的表格的 php 文件:

echo    '<td valign="bottom">
            <div class="profile-image">
                <figure>
                    <a href="#"><img src="'.$image.'" width="250px" height="200px" /></a>
                    <figcaption>'.$nombreAlmno.'<br>'.$semestre.' semestre</figcaption>
               </figure>
               <span class="overlay"></span>
             </div>                                         
     </td>';

它确实有效，这就是我得到的:

所以我的问题是我正在尝试使用 <span class="overlay"> 在悬停时显示另一个图像我调用我的 css 文件:

.profile-image:hover .overlay {
position:absolute;
width: 800px;
height: 800px;
z-index: 100;
background: transparent url('http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg') no-repeat;
cursor: pointer;
}

我知道我的 css 正在工作(至少是部分工作)，因为当我将光标放在图像上时，它会变为指针光标，但根本不显示跨度。

任何提示或技巧将不胜感激。

Answer 1

您需要父元素(相对于其设置绝对定位的元素)具有固定位置(在这种情况下，position:relative 可能是最好的)。此外，请务必设置 top、bottom、left 或 right 属性以控制图像出现的位置!

http://jsfiddle.net/gztLspL3/4/

HTML:

<table>
<td valign="bottom">
    <div class="profile-image">
        <figure> <a href="#">
                <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" width="250px" height="200px" />
            </a>

            <figcaption>'.$nombreAlmno.'
                <br>'.$semestre.' semestre</figcaption>
        </figure> <span class="overlay"></span>

    </div>
</td>

CSS:

.profile-image {
    position: relative;
}

.profile-image:hover .overlay {
    position: absolute;
    width: 800px;
    height: 800px;
    z-index: 100;
    background: transparent url('http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg') no-repeat;
    cursor: pointer;
    left: 100%;
    top: 0;
}

此外，如果您希望它直接出现在图像旁边: http://jsfiddle.net/gztLspL3/6/