Неисправность с помощью CSS Hover и Active

Question

Я пытаюсь изменить изображение кнопки при ее наведении и активном, в настоящее время она покажет кнопку, но когда вы переходите на нее, она не меняется, я пробовал давая кнопкам собственный идентификатор, а также просто заменяя текущее изображение другим, но он не работает.

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

Answer 1

Попробуйте

#home:hover 

Или

#navmain #home:hover 

Или

a#home:hover 

Answer 2

Этот CSS является неправильным:

#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:hover, #home a:hover

также не уверен, если это вопрос копия пасты, но вам не хватает закрывающей скобки для #navmain li, #navmain a, но это вызывает другую проблему, если вы есть.

Answer 3

Вы должны очистить свои селекторы CSS. Вы не быть последовательным:

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

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

Так попробуйте:

#navmain a:hover{...}