HTML CSS 在悬停时显示文本框

Posted 2023-03-06

【中文标题】HTML CSS 在悬停时显示文本框

【英文标题】：HTML CSS Show Text box on hovering

【发布时间】：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   align="center" border="1">
   <tr><td  valign="top">
<p class="own"><img src="images/avater.jpg"   />
<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  valign="top">
<p class="own"><img src="images/avater.jpg"   />
<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/

【参考方案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;