首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >更改导航选项卡上的悬停颜色

更改导航选项卡上的悬停颜色
EN

Stack Overflow用户
提问于 2012-05-18 14:50:51
回答 4查看 62.4K关注 0票数 16

我想更改鼠标悬停导航选项卡的文本颜色,所以我命名为: nav nav-tabs custom,因此我视图中的代码如下所示:

代码语言:javascript
复制
      <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中的代码

代码语言:javascript
复制
.custom a:hover {color: black;}

但它不起作用。有人能帮帮我吗?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-05-18 20:30:39

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

代码语言:javascript
复制
.custom > li > a:hover {
    color: black;
}

顺便说一下,如果您想在鼠标悬停时更改选项卡的背景颜色,将color属性切换为background-color,这只会更改文本的颜色。

票数 22
EN

Stack Overflow用户

发布于 2012-05-19 06:38:01

Andres关于特异性的看法是正确的。要替代的样式设置为:

代码语言:javascript
复制
.nav-bar > li > a:hover

如果你在Twitter Bootstrap中使用LESS,这里已经有了一些变量:

代码语言:javascript
复制
@navbarLinkColor
@navbarLinkColorHover
@navbarLinkColorActive

请参阅文档的Navbar部分。

票数 3
EN

Stack Overflow用户

发布于 2015-08-07 23:32:31

这对我来说没有太多的“特异性”,除了默认的Bootstrap...

代码语言:javascript
复制
ul.nav > li > a:hover {
	background-color: #000000;
	color: #FFFFFF;
	border-style: none;
}

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10647997

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档