麻煩與CSS懸停和Active

我試圖改變按鈕的圖像時，其上懸停和活躍，目前它會顯示按鈕，但是當你懸停在不改變，我已經試過給按鈕有自己的ID以及用另一個替換當前圖像，但它不起作用。麻煩與CSS懸停和Active

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

來源

2013-09-28 Billy Greene

你可以做一個小提琴？ – avrahamcool

這是因爲你的穿着正常狀態的李背景和A，然後懸停你只需要改變只A.堅持只用答： – dciso

嘗試

#home:hover

或者

#navmain #home:hover

或者

a#home:hover

來源

2013-09-28 21:15:26 beautifulcoder

他們都做同樣在這種情況下，所以我會建議的第一個作爲最不具體的。 – Pavlo

這個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，但如果你是這樣會導致另一個問題。

來源

2013-09-28 21:17:43

你必須清理你的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{...}

來源

2013-09-28 21:18:03 jmbertucci

麻煩與CSS懸停和Active

回答

相關問題