Html 将表格中的文本定位为：悬停

我一直在试图找到解决这个问题的办法。 我实际上是想激活：hover伪类 当我将光标悬停在表格中的文本上时，边框位于底部

它当前正在做的是在我悬停时激活：hover伪类 在表格单元格中，但我只希望在将鼠标悬停在文本上时激活它

以下是我的JSFIDLE：

（由于某些原因，边框底部在JSFIDLE中没有高亮显示）

这是我的一些代码

        <table id="navbar">
        <tr>
            <td class="nav1"></td>
            <td id="hover" class="nav2"><a href="http://www.google.com/">home</a></td>
            <td id="hover" class="nav2"><a href="http://www.google.com/">products</a></td>
            <td id="hover" class="nav2"><a href="http://www.google.com/">services</a></td>
            <td id="hover" class="nav2"><a href="http://www.google.com/">about</a></td>
            <td id="hover" class="nav2"><a href="http://www.google.com/">contact</a></td>
            <td class="nav1"></td>
        </tr>
    </table>


table#navbar {
border:3px solid black;
margin:0 auto;
border-collapse:collapse;
}

td.nav2 {
text-align:center;
width:100px;
font-size:20px;
font-weight:bold;
}

td.nav1 {
width:243px;
}

a:visited, a:link  {
color:black;
text-decoration:none;
}

td#hover:hover {
border-bottom:3px solid e8e8e8;
padding-bottom:1px;
}

表#导航栏{
边框：3倍纯黑；
保证金：0自动；
边界塌陷：塌陷；
}
td.nav2{
文本对齐：居中；
宽度：100px；
字体大小：20px；
字体大小：粗体；
}
td.nav1{
宽度：243px；
}
a:已访问，a:链接{
颜色：黑色；
文字装饰：无；
}
td#悬停：悬停{
边框底部：3px实心e8e8e8；
垫底：1px；
}

如果我的问题不够清楚，我道歉

编辑：修复了JSFIDLE，thx的所有答案

---

编辑2：好的，我想我已经按照我想要的方式工作了，再次谢谢你的回答。

这里有两个问题。首先，重复相同的ID。将selecytor更改为

td.nav2 a:hover

，以使用该类。其次，您的颜色定义缺少代码前的#；没有散列表示您正在按名称使用颜色（白、黑、红、绿、蓝等）

您当前的CSS选择器将获取整个

td.nav2 a:hover {
  border-bottom:3px solid #e8e8e8;
  padding-bottom:1px;
}

---

将仅在用户将鼠标悬停在链接上时触发。

听起来您想更改一个元素的css，而另一个元素悬停在该链接上。 以下是通过快速搜索发现的方法： 简单回答：

您正在设置的底部边框颜色：

border-bottom:3px solid e8e8e8;

应该是：

border-bottom:3px solid #e8e8e8;

长答覆：

---

代码中有许多错误并没有导致错误。您应该研究使用列表进行导航。此外，您为每个“td”声明了相同的ID。ID在html中只能使用一次。

他还想将悬停从ID更改为类。FIDLE中的错误是

边框底部：3px solid e8e8e8只需在颜色代码之前添加哈希；）