更改导航选项卡上的悬停颜色
更改导航选项卡上的悬停颜色
提问于 2012-05-18 14:50:51
我想更改鼠标悬停导航选项卡的文本颜色，所以我命名为: nav nav-tabs custom，因此我视图中的代码如下所示：
<li class="active"><%= link_to "Overview", '#' %>
</li>
<li><%= link_to "About", '#' %></li>
<li><%= link_to "What we do", '#' %></li>
<li><%= link_to "Partners", '#' %></li>
<li><%= link_to "Contact", '#' %></li>
<li><%= link_to "Support", '#' %></li>
</ul>和我的custom.css.scss中的代码
.custom a:hover {color: black;}但它不起作用。有人能帮帮我吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-05-18 20:30:39
您需要使您的选择器更具体一点，以正确定位您的选项卡。试试这个：
.custom > li > a:hover {
color: black;
}顺便说一下，如果您想在鼠标悬停时更改选项卡的背景颜色，将color属性切换为background-color，这只会更改文本的颜色。
Stack Overflow用户
发布于 2012-05-19 06:38:01
Andres关于特异性的看法是正确的。要替代的样式设置为：
.nav-bar > li > a:hover如果你在Twitter Bootstrap中使用LESS，这里已经有了一些变量：
@navbarLinkColor
@navbarLinkColorHover
@navbarLinkColorActive请参阅文档的Navbar部分。
Stack Overflow用户
发布于 2015-08-07 23:32:31
这对我来说没有太多的“特异性”，除了默认的Bootstrap...
ul.nav > li > a:hover {
background-color: #000000;
color: #FFFFFF;
border-style: none;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10647997
复制相关文章
相似问题
腾讯云开发者
