在 twitter-bootstrap 中更改活动的“导航药丸”颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28770668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:24:05  来源:igfitidea点击:

Change active "nav-pills" color in twitter-bootstrap

htmlcsstwitter-bootstrap

提问by AdowTatep

I'm trying to change the color when I click on the button of nav-pills, actually i want to delete this action, when i click, something like that:

当我点击导航丸按钮时,我试图改变颜色,实际上我想删除这个动作,当我点击时,像这样:

Img Link: http://i.stack.imgur.com/PuoYX.png(because i can't post image yet)

Img 链接:http: //i.stack.imgur.com/PuoYX.png(因为我还不能发布图片)

In the "stream" button, this happens when i click it, but i want nothing to happen, or at least change to the same as my hover action.

在“流”按钮中,当我单击它时会发生这种情况,但我不希望发生任何事情,或者至少更改为与我的悬停操作相同。

html:

html:

<div class='navizinha'>

            <ul class="nav nav-pills nav-stacked">
                <li><a href='#'>Início</a></li>
                <li><a href='#'>Inscri??o</a></li>
                <li><a href='#'>Stream</a></li>
                <li><a href='#'>Tabela</a></li>
                <li><a href='#'>F.A.Q</a></li>
            </ul>

        </div>

and my css:

和我的CSS:

.nav-pills a {
    color: #ffffff
}

.nav-pills a:hover {
    color: #560000;
    border-radius: 0px;
}

.nav-pills .active a:hover {
    color: #560000;
    border-radius: 0px;
}

回答by Sebsemillia

If I understand you correctly, you also need to target the :focusstate via CSS, like this:

如果我理解正确,您还需要:focus通过 CSS定位状态,如下所示:

.nav>li>a:hover,
.nav>li>a:focus {
    text-decoration: none;
    background-color: #560000;
}

Working Example

工作示例

More about the focus state on CSS-Tricks

更多关于 CSS-Tricks 的焦点状态

回答by Olalekan Sogunle

Or you can give this a try

或者你可以试试这个

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{
background-color:yourBgColor;
color:yourLinkColor;
}

From this link

这个链接