Question

我无法使用Bootstrap更改Nav类或元素的背景颜色。其他样式会改变，如颜色，但背景颜色不会。有任何想法吗？

HTML

<div class="row">
    <div class="col-md-12">
        <nav role="navigation">
            <ul class="nav nav-pills nav-justified">
                <li><a href="index.html">Home</a></li>
                <li><a href="who.html">Who We Are</a></li>
                <li><a href="our_home.html">Our Homes</a></li>
                <li><a href="careers.html">Careers</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>
</div>

CSS

nav ul li a {
    color:#007ECF;  
    border-width:1px;
    border-color:#007ECF;
    border-style:solid;
    margin:0 .2em;
    background-color: rgba(23, 134, 145, .2);
}
nav ul li a:hover {
    color:red;
    background-color:rgba(123, 45, 198, .9);
}

Answer 1

您可以更喜欢您的风格，如下所示

nav ul li a:hover {
    color:red !important;
    background-color:rgba(123, 45, 198, .9) !important;
}

Answer 2

使用重要肯定可以做到这一点。

但是，您应该检查您的操作顺序。

在bootstrap中通常是

nav ul li:hover a {background: red}

应该给你想要的结果

悬停状态下的Bootstrap CSS Nav类背景颜色更改

2 个答案: