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

当用户将鼠标悬停在第一个

td

单元格的左边框上时，我试图显示工具提示。我的代码如下（）：

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>

---

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

我会在第一个

内添加一个绝对定位的div，其宽度等于边框大小（或稍大一点），然后使用它来监听悬停事件

---

您可以更改任何html标记吗？我想您可以，只要工具提示显示在边框上方……我想不出来。在左边框上方？你是说基本上就在你悬停的区域的正上方，然后左对齐？只需使用

top

和

left

调整这些值，仅当光标悬停在第一个单元格的左边框上时，工具提示才会出现。没有别的地方。你说的“越过左边边界”到底是什么意思？你能解释一下吗？如果将单元格从顶部、右侧或底部悬停，则工具提示不应出现，而仅当我使用鼠标光标从左侧进入单元格时才会出现？

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