CSS Hover inside div elements with sub elements

Question

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!

qiu-deqing · Accepted Answer · 2014-01-04 03:17:58Z

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:

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

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

edited Jan 4, 2014 at 3:17

answered Jan 4, 2014 at 3:10

qiu-deqing

1,3337 silver badges13 bronze badges

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

Comments

sensei · Accepted Answer · 2014-01-04 03:15:00Z

0

use this:

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

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

edited Jan 4, 2014 at 3:15

answered Jan 4, 2014 at 3:09

sensei

7,69212 gold badges68 silver badges133 bronze badges

Collectives™ on Stack Overflow

CSS Hover inside div elements with sub elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related