當我將鼠標懸停在按鈕上時，爲什麼這個下拉陰影會消失？

Question

我使用CSS來設計一些按鈕。我想用陰影製作白色塊，當你將它懸停在它上面時，我想讓陰影消失。這是我正在使用的CSS。

#mainMenu li a:link, #mainMenu li a:visited { 
    font-family: sans-serif; 
    display:block; 
    color: #000; 
    width:; 
    height:40px; 
    text-decoration: none; 
    /* top right bottom left */ 
    background:#FFF; 
    padding: 0 30px 0 30px; 
    margin-right: 20px; 
    line-height: 40px; 
    /* DROP Shadow */ 
    -moz-box-shadow: 3px 3px 4px #000; 
    -webkit-box-shadow: 3px 3px 4px #000; 
    box-shadow: 3px 3px 4px #000; 
} 

/* Change this to add images to buttons for rollover*/ 
#mainMenu li a:hover, #mainMenu li a:active { 
    font-family: sans-serif; 
    display:block; 
    color: #000; 
    width:; 
    height:40px; 
    text-decoration: none; 
    /* top right bottom left */ 
    background:#FFF; 
    padding: 0 30px 0 30px; 
    margin-right: 20px; 
    line-height: 40px; 
} 

但是，當我試圖測試這個時，陰影不會消失。有任何想法嗎？

這是我使用的HTML。

<div id="header"> 
    <div id="mainMenu"> 
     <ul> 
      <li><a href="####">Home</a> 
      <li><a href="####">About</a> 
     </ul> 
    </div><!-- mainMenu -->  
</div><!-- header --> 

謝謝， 邁克

Answer 1

你不是告訴CSS來刪除樣式。請記住，CSS樣式是級聯，這意味着如果您告訴按鈕具有陰影，它將始終應用該陰影，除非您將其告知其他類別。

在這種情況下，所有你需要做的是改變你的第二個CSS類以下幾點：

/* Change this to add images to buttons for rollover*/ 
#mainMenu li a:hover, #mainMenu li a:active { 
    font-family: sans-serif; 
    display:block; 
    color: #000; 
    width:; 
    height:40px; 
    text-decoration: none; 
    /* top right bottom left */ 
    background:#FFF; 
    padding: 0 30px 0 30px; 
    margin-right: 20px; 
    line-height: 40px; 

    /* REMOVE drop Shadow */ 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

如果你想，當你徘徊的陰影，只走（和它仍然在那裏當你的鏈接處於活動狀態，那麼你就需要爲另一個CSS類A LA：。

#mainMenu li a:hover { 
    /* REMOVE drop Shadow when hovering only */ 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

HTH

Answer 2

因爲<a>依然繼承了drop-shadow。你應該在:hover中將它設置爲none。

像這樣：

#mainMenu li a:hover 
{ 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
}