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

时间:2012-08-11 14:31:52

标签: css menu hover border stylesheet

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

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

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

上有悬停设置

3 个答案:

答案 0 :(得分:2)

只需添加(或修改现有的CSS以包含)以下内容:

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

JS Fiddle demo

  

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

以前没有改变悬停效果,因为你可能(我猜想,我放弃了读取你的CSS不到一半),为{{指定了:hover规则1}}元素是a元素的子元素,但边框附加到li,而不是li。所以在a的边界上空盘旋没有效果。

此规则只是指定lia元素的颜色应为白色(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; } )和外部风格(使用样式表);为了清晰起见,易于更新,编辑和维护,请尝试仅使用外部表单。

答案 1 :(得分:1)

如果您希望边框成为超链接的一部分(也就是说,当鼠标悬停在边框上时用户可以单击超链接),那么您需要从{{1}中删除边框并将其添加到超链接。如有必要,请将li添加到超链接。

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

Modified demo

答案 2 :(得分:1)

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

在你的CSS样式中并用

替换它

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

悬停