悬停边框底部时更改文本颜色答案

【问题标题】：Change text color when hovering border-bottom悬停边框底部时更改文本颜色
【发布时间】：2012-08-08 13:48:12
【问题描述】：

我有这个代码，请注意这个小提琴： http://jsfiddle.net/VjhJ4/19/

当您将鼠标悬停在文字上时，文字颜色会变为白色 - 这就是我想要的。但是，将鼠标悬停在 20px 边框底部时，文本颜色不会变为白色。只需将鼠标悬停在边框底部并检查。

当您将鼠标悬停在底部时，如何使文本颜色变为白色？我目前在ul#secondary-menu a:hover { color: #FFFFFF;}上有悬停设置

【问题讨论】：

从你的风格中清除不需要的 HTML 和 CSS.. 非常拥挤
认真的吗？将 CSS 和 HTML 缩减为只需要的部分。记住：SSCCE；帮助我们帮助您。
抱歉，这是我整个网站的样式表。它来自我购买的模板，因此我对它并不完全熟悉，因为我的编码知识有限。因此，如果我要从中删除一些东西，我最终可能会删除一些解决这个问题所需的东西。也许我应该在问题中添加此注释...
那么这可以帮助您找出问题所在，我们将帮助您解决问题，但我们确实需要您付出一些努力来诊断问题所在。

【解决方案1】：

只需添加（或修改现有的 CSS 以包含）以下内容：

#second-menu ul.nav li:hover a {
    color: #fff;
}

你能解释一下为什么它之前没有改变悬停，以及这有什么帮助吗？正如我所提到的，我的编码知识是有限的，所以我想了解这里的问题是什么

它之前并没有改变悬停效果，因为你大概（我假设我在不到一半的时间内放弃阅读你的 CSS）为 a 元素指定了 :hover 规则那是li 元素的子元素，但边框附加到li，而不是a。所以悬停在li 的边框上没有任何效果。

此规则仅指定li 中a 元素的颜色应为白色（#fff），以响应鼠标悬停在li 元素上。在实践中，将此规则放在样式表的末尾会导致它覆盖任何其他可能已在其他地方声明的冲突规则（而且，我再一次因为它的长度而放弃阅读样式表）。

我建议您找到定义a:hover 效果的任何规则，并将这两个规则加在一起，例如：

#second-menu ul.nav li a:hover,
#second-menu ul.nav li:hover a {
    color: #fff;
}

特异性可能不需要那么高，因此您可以将选择器缩减为更短的内容，例如：

ul.nav li a:hover,
ul.nav li:hover a {
    color: #fff;
}

哦，值得注意的是，您有很多内联样式 (style="...") 和外部样式（使用样式表）；尝试并仅使用外部形式，以便清晰并便于更新、编辑和维护。

【讨论】：

【解决方案2】：

如果您希望边框成为超链接的一部分（也就是说，当鼠标悬停在边框上时用户可以单击超链接），那么您需要从li 中删除边框并而是将其添加到超链接。如有必要，将display:inline-block 添加到超链接。

如果边框不需要成为超链接的一部分，那么@David Thomas 的建议应该就是您所需要的。

【讨论】：

是的，我还需要超链接来包含边框，你能否用你的解决方案更新小提琴，我可以看看你的意思？
我添加了一个修改版的演示。我所做的只是将边框的内联样式从li 标记移动到a 标记。
工作得很好，但是，为什么悬停时块之间会有空间？它大约是 1 或 2 像素...？
再次更新了演示，从ul#secondary-menu li li 标签的 CSS 规则中删除了 padding-right:2px。如果您需要额外的间距，请为超链接标签的ul#secondary-menu a CSS 规则添加额外的 2px 内边距。
谢谢，虽然我不能接受它作为这个问题的答案，但我已经对此表示赞同，因为大卫已经击败了你。但是，您提供的内容很可能是我的下一个问题，所以非常感谢马特；）

【解决方案3】：

搜索字符串 ul#secondary-menu a:hover { color: #FFFFFF;}

用你的css风格替换它

ul#secondary-menu li:hover a{ color: #FFFFFF;}

【讨论】：