Html css不工作：悬停

首先，这里有一个我想做的，基于我的代码的例子

我在使用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>';

我知道我的css正在工作（至少是它的一部分），因为当我把光标放在一个图像上时，它会变为指针光标，但跨度根本没有显示出来

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

添加如下jquery

$( "div.profile-image>a>img" ).hover(
  function() {
    $( "#bigOne").first().css("display", "block").css("background", "transparent url('" + $(this).prop("src").replace("_s.jpg", ".jpg") + "') no-repeat");
  }, function() {
    $( "#bigOne" ).css("display", "none").css("background", "");
  }
);

并更改您的css名称

#bigOne {
    position:absolute;
    width: 800px;
    height: 800px;
    z-index: 100;
    cursor: pointer;
    display:none;
}

并将

更改为

别忘了在页面中添加jquery

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

---

您需要父元素（相对设置绝对位置的元素）来设置位置（在本例中，position:relative可能是最好的）。另外，请确保设置“顶部”、“底部”、“左侧”或“右侧”属性来控制图像的显示位置

HTML:

此外，如果希望它直接显示在图像旁边：

---

.profile image

是否有

位置：相对的
？它应该。必须接受css或jquery吗？
.overlay
应该有一个
顶部：0和a
左：0太多。@Abdullah jquery也可以接受//即使使用相对位置，顶部0和左侧0 span仍然不显示。要相对定位图像的元素应将
位置设置为非
静态
，并且
顶部
和
左侧
应设置为
叠加
@Omaruchan看到编辑了，我想这就是你要找的。注意：您可能需要更改元素的位置：相对，以使图像显示在更合适的位置（可能是元素周围的div？）是的，这实际上符合我的要求：D我的图像不再有序，但这肯定是我可以解决的问题。多谢各位@Omaruchan Np，很高兴我能帮忙！
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<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>

.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;
}