Question

当用户将鼠标悬停在第一个td单元格的左边框上时，我会尝试显示工具提示。我的代码如下（JSFiddle here）：

HTML

<table class="cart"> 
    <tr> 
        <th id="pos">Pos</th> 
        <th id="name">Product</th> 
        <th id="price">Price</th> 
    </tr> 
    <tbody> 
        <tr>
            <td>
              <span>New visual experience!</span>
            </td>
            <td>
                1
            </td>
            <td>19.99</td>
        </tr>
        <tr>
            <td>
              <span>Inject music directly into your ears!</span>
            </td>
            <td>
                2
            </td>
            <td>19.99</td>
        </tr>
    </tbody> 
</table>

CSS

table tr td{
    border: 1px solid blue;
}
.cart { width: 100%; }

td span {
    display: none;
    color: #000;
    text-decoration: none;
    padding: 3px;
    cursor: arrow;
}

td:hover span {
    display: block;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #CCC;
    margin: 2px 10px;
    cursor: pointer;
}

我尝试了很多方法，但是工具提示一直出现在整个单元格上，而不是像我想要的那样出现在左边框上。有人可以帮忙吗？

Answer 1

我会添加一个绝对定位的div，其宽度为第一个<td>内部边框（或略大）的宽度，然后使用它来侦听悬停事件。

https://jsfiddle.net/x1c3hxyx/4/

将鼠标悬停在表格单元格边框上时显示工具提示

1 个答案: