0

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

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

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

4

3 回答 3

2

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

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

JS 小提琴演示。

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

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

此规则仅指定a元素的颜色li应为白色 ( #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="...") 和外部样式（使用样式表）；尝试并仅使用外部形式，以便清晰和易于更新、编辑和维护。

于 2012-08-11T14:41:16.587 回答
1

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

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

修改后的演示

于 2012-08-11T14:44:34.613 回答
1

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

以您的 CSS 样式替换它

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

于 2012-08-11T14:52:46.233 回答