Question

我想更改悬停nav-tabs的文字颜色，所以我将其命名为：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;}

它不起作用。有人能帮助我吗？

Answer 1

您需要使选择器更加具体，以正确定位标签。试试这个：

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

顺便说一下，如果您想要在color属性为background-color的情况下切换选项卡的背景颜色，这只会更改文字的颜色。

Answer 2

Andres对于特异性是正确的。要覆盖的样式设置为：

.nav-bar > li > a:hover

如果你在Twitter Bootstrap上使用LESS，那么已经有了变量：

@navbarLinkColor
@navbarLinkColorHover
@navbarLinkColorActive

请参阅文档的Navbar部分。

Answer 3

除了默认的Bootstrap ...

之外，这对我来说没有太多“特异性”

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

Answer 4

设置@navbarLinkBackgroundHover

在导航标签上更改悬停颜色

4 个答案: