1

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!

codingrose
  • 15,563
  • 11
  • 39
  • 58
Ryan
  • 414
  • 1
  • 5
  • 16
  • .nav a:hover { color: red !important;} or .nav li:hover > a { color: red !important;} ? not sure – Gilly Jan 12 '14 at 02:44
  • its duplicate though: http://stackoverflow.com/questions/16625972/change-color-of-bootstrap-navbar-on-hover-link?rq=1 – Gilly Jan 12 '14 at 02:46

1 Answers1

2

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

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • 1
    Works like a charm. I was missing the extra "." for the pull-right section when I was adding my CSS (so I had .nav pull-right instead). Thanks! – Ryan Jan 12 '14 at 03:21