16

我想更改悬停导航选项卡的文本颜色，所以我命名为：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

4 回答 4

22

您需要使您的选择器更具体一点，以正确定位您的选项卡。尝试这个：

.custom > li > a:hover {
    color: black;
}

顺便说一句，这只会更改文本的颜色，如果您想在悬停时更改选项卡的背景颜色，请将该color属性切换为background-color.

于 2012-05-18T12:30:38.537 回答
3

安德烈斯关于特异性是正确的。您要覆盖的样式设置为：

.nav-bar > li > a:hover

如果您在 Twitter Bootstrap 中使用 LESS，则已经为此创建了一些变量：

@navbarLinkColor
@navbarLinkColorHover
@navbarLinkColorActive

请参阅文档的导航栏部分。

于 2012-05-18T22:38:01.307 回答
2

除了默认的 Bootstrap 之外，这对我没有太多“特异性​​”...

ul.nav > li > a:hover {
	background-color: #000000;
	color: #FFFFFF;
	border-style: none;
}

于 2015-08-07T15:32:31.453 回答
1

设置@navbarLinkBackgroundHover

于 2012-12-02T00:09:49.543 回答