Question

我想更改“网站”和“主页”的悬停颜色

<body>
    <div class="navbar transparent navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand headtop" href="#">Web Site</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="headtop"><a href="#">Home</a></li>

并且css这段代码

a.headtop:hover, a:hover  {
    color: #fc4c1d;
}

但是没有工作......我该如何让它发挥作用？

a:hover  {

正在使用正文页面中的其他链接但不适用于div元素中的文本。

非常感谢！

Answer 1

我猜您正在使用引导程序来设置页面样式

bootstrap添加一些规则来设置{。1}}在.navbar中的悬停样式，其中一些将是这样的：

<a>

因此您可以看到.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333333; background-color: transparent; }具有比您的

更高的特异性

a：悬停所以它会击败你的简单a：悬停规则，这会导致你的目标失败。

解决方案：

放弃引导程序
覆盖bootstrap中的规则：hover
为您的目标.navbar-default .navbar-nav > li > a:hover添加ID，以提供更高的特异性，然后设置样式<a>
使用！important #home:hover {}

http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 2

使用它：

.navbar a:hover{
    color: #fc4c1d !important;
}

演示： http://jsfiddle.net/nukec/qL48R/2/

CSS将div元素悬停在div元素中

2 个答案: