CODEWITHSUNDEEP
css
Billy Greene
Billy Greene

Reputation: 11

Trouble with CSS Hover and Active

I'm trying to change the image of the button when its on hover and active, currently it will show the button but when you go to hover over it doesn't change, I've tried giving the buttons there own id as well as just replacing the current image with another but it doesn't work.

html: 

 <div id="navcontainer" class="column five">
        <ul id="navmain">
            <li><a href="index.html" id="home">Home</a></li>
            <li><a href="philosophy.html" id="btnphil">Philosophy</a></li>
            <li><a href="econews.html" id="btnnews">Eco News</a></li>
            <li><a href="diy.html" id="btndiy">DIY</a></li>
            <li><a href="takeaction.html" id="btntake">Take Action </a></li>        </ul>
    </div><!-- .sidebar#sideLeft -->

CSS:

#navcontainer{
padding:10px 30px; 
width:220px;
float: left;
margin-top:480px;
}


#navmain li{
list-style:none;
}
#navmain li, #navmain a{
text-decoration:none;
height:38px;
width:153px;
background-image: url('../images/button.png') ;
   background-position: center;
   text-align: center;
   color:#000;
   margin-left:-10px;
   margin-top:20px;
  vertical-align: -22%;



#navmain, #home a:hover {
    text-decoration:none;
height:38px;
width:153px;
background-image: url('../images/buttonhover.png') ;
   background-position: center;
   text-align: center;
   color:#000;
   margin-left:-10px;
   margin-top:20px;;}
}

#navmain a:active {
   border-top-color: #297ab0;
   background: #297ab0;
   }

Upvotes: 1

Views: 91

Answers (3)

jmbertucci
jmbertucci

Reputation: 8234

You have to clean up you CSS selectors. You're not being consistent:

// This is applying the image
#navmain li, #navmain a{...}

// This is swapping but it starts with "#home" instead of "#navmain"
#navmain, #home a:hover {...}

So try:

#navmain a:hover{...}

Upvotes: 3

siva.k
siva.k

Reputation: 1344

This CSS is wrong:

#navmain, #home a:hover {
    text-decoration:none;
    height:38px;
    width:153px;
    background-image: url('../images/buttonhover.png') ;
    background-position: center;
    text-align: center;
    color:#000;
    margin-left:-10px;
    margin-top:20px;
}

The element should be set against #navmain a:hover, #home a:hover

Also not sure if it's a copy paste issue but you are missing the closing bracket for #navmain li, #navmain a, but that causes another problem if you are.

Upvotes: 0

beautifulcoder
beautifulcoder

Reputation: 11330

Try

#home:hover

Or

#navmain #home:hover

Or

a#home:hover

Upvotes: 0

Related Questions