0

I want to change the color of hover for "Web Site" and "Home"

<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>

And css this code

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

But not working... how do I make it work?

a:hover  {

is working for other links in body page but not working for the text inside div elements.

Thanks a lot!

2 Answers 2

2

i guess you are using bootstrap to style your page

bootstrap add some rule to style the hover of <a> in .navbar some of them will be like this:

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}

so you can see that .navbar-default .navbar-nav > li > a:hover has higher specificity than your

a:hover so it will beat your simple a:hover rule, which results in your fail of goal.

the solution:

  1. give up bootstrap
  2. override the rule in bootstrap for :hover
  3. add id for your target <a> to give a higher specificity then style #home:hover {}
  4. use !important a:hover { color: red !important}

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

Sign up to request clarification or add additional context in comments.

Comments

0

use this:

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

demo: http://jsfiddle.net/nukec/qL48R/2/

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.