HTML CSS 在悬停时显示文本框答案

【问题标题】：HTML CSS Show Text box on hoveringHTML CSS 在悬停时显示文本框
【发布时间】：2015-01-23 15:50:03
【问题描述】：

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

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/

【问题讨论】：

标签： html css html-table hover

【解决方案1】：

Alihamra，听起来您正在寻找工具提示。我建议您像之前概述的答案/cmets 一样清理您的代码，然后尝试使用以下内容：http://www.menucool.com/tooltip/css-tooltip。

谢谢

【讨论】：

【解决方案2】：

JSFiddle

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

z-index:9;

到：

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

你的意思是这样的吗？

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

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

【讨论】：