Question

我正在寻找的是当我将鼠标悬停在图片或文字上时，它会自动显示一个包含与该图片相关的文字的框。如下：

CSS ：

.owners{
    width:500px;
    height:300px;
    border:0px solid #ff9d2a;
    margin:auto;
    float:left;

}
    span.own1{
        background:#F8F8F8;
        border: 5px solid #DFDFDF;
        color: #717171;
        font-size: 13px;
        height: 250px;
        width:310px;
        letter-spacing: 1px;
        line-height: 20px;
        position:absolute;
        text-align: center;
        text-transform: uppercase;
        top: auto;
        left:auto;
        display:none;
        padding:0 0px;


    }

    p.own{
        margin:0px;
        float:left;
        position:relative;
        cursor:pointer;
    }

    p.own:hover span{
        display:block;
    }

HTML ：

<div class="owners">

<table width="100%" height="100%" align="center" border="1">
   <tr><td width="%" valign="top">
<p class="own"><img src="images/avater.jpg" width="100" height="100" />
<br />
<font style="font-size:15px;">Employee Name</font><span class="own1">some text here should be shown here</span></p>
</td></tr>
   <tr><td width="%" valign="top">
<p class="own"><img src="images/avater.jpg" width="100" height="100" />
<br />
<font style="font-size:15px;">Employee Name</font><span class="own1">some text here should be shown here</span></p>
</td></tr>
</table>

</div>

上述代码的输出是一个包含员工图像及其名称列表的表。因此，当我将鼠标悬停在它们上面时，一个框显示包含与之相关的文本但是它们显示在图像和名称后面，我的意思是我希望使这个框架站在不在后面的图像前面他们。我希望这是有道理的！我尝试过更改position:absolute和position:fixed，但没有一个可以根据需要运行！

您也可以查看：http://jsfiddle.net/g1o8vyqd/

Answer 1

JSFiddle

只需添加代码，您就应该确认没有 z-index 高于您的悬停元素。

z-index:9;

为：

 p.own:hover span{
        display:block;
        z-index:9;
    }

Answer 2

使用z-index:1将元素提升到其余元素之上：

p.own:hover span {
    display:block;
    z-index:1
}

小提琴：http://jsfiddle.net/g1o8vyqd/3/

<小时/> 另请注意，您的标记不是很好：除了table使用不正确（tabular data的用法）之外，您使用的是font tag， 已过时。（事实上，它已在HTML 4 中弃用）

Answer 3

你的意思是这样吗？

p.own{
    margin:0px;
    float:left;
    position:relative;
    cursor:pointer;
    opacity: 0;
}

p.own:hover span{
    display:block;
    opacity: 1;
    z-index: 99;
}

Answer 4

Alihamra，听起来你正在寻找工具提示。我建议像以前的答案/评论那样清理你的代码，然后尝试使用这样的代码：http://www.menucool.com/tooltip/css-tooltip。

由于

悬停时HTML CSS显示文本框

4 个答案: