CODEWITHSUNDEEP
htmlcsshover
user2671513
user2671513

Reputation:

CSS Hover inside div elements with sub elements

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!

Upvotes: 0

Views: 9930

Answers (2)

qiu-deqing
qiu-deqing

Reputation: 1333

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

Upvotes: 2

sensei
sensei

Reputation: 7562

use this:

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

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

Upvotes: 0

Related Questions