CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ryan
Ryan

Reputation: 434

Override Bootstrap hover on navbar

I'd like to override the font color when I hover over a tab/link on my navbar. I currently have the following HTML:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class = "container">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>

            </ul>
            <ul class ="nav pull-right">
                <li><a href="#">Link</a></li>

                <li class="divider-vertical"></li>
                <li ><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</div>

I just would like the tabs on the right to turn a different color. I understand pseudoselectors, I'm just wondering how I'd properly do this with my own CSS. Thanks!

Upvotes: 1

Views: 9139

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240888

If the selector is specific enough, you can avoid usage of !important. In this case, you would use:

.nav.pull-right > li > a:hover {
    /* style .. */
}

jsFiddle example

Alternatively, you could also use .navbar-inner .container .nav.pull-right > li > a:hover

Upvotes: 2

Related Questions