Question

我一直试图找到这个问题的解决方案一段时间了。我实际上要做的是：hover伪类激活当我将光标悬停在表格中的文本上时，边框底部。

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

这是我的jsfiddle：

（由于某种原因，边框底部没有在jsfiddle中突出显示）

这是我的一些代码

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

如果我的问题不够明确，

道歉

编辑：修复jsfiddle，thx为每个人的答案

编辑2：好吧，我想我按照我想要的方式工作，再次回答答案。

Answer 1

这里有两个问题。首先，您重复相同的ID。将您的选择者更改为td.nav2 a:hover以改为使用该课程。其次，您的颜色定义缺少代码前的＃;没有散列意味着您使用的是名称颜色（白色，黑色，红色，绿色等）。

您当前的CSS选择器获取整个<td>。

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

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

Answer 2

听起来你想要改变一个元素的css，当另一个元素悬停在上面时。通过快速搜索显示了它是如何完成的： How to change one element while hovering over another

Answer 3

简单回答：

您要设置底部边框颜色的位置：

border-bottom:3px solid e8e8e8;

它应该是：

border-bottom:3px solid #e8e8e8;

答案很长：

您的代码有很多问题没有导致错误。您应该考虑使用列表进行导航。此外，您为每个'td'声明了相同的ID。 ID只能在你的html中使用一次。

使用以下内容定位表格中的文字：悬停

3 个答案: