html - 当我将鼠标悬停在按钮上时，为什么这个投影不会消失？

Question

我正在使用 CSS 来设计一些按钮的样式。我想制作带有阴影的白色 block ，当您将鼠标悬停在它上面时，我想让阴影消失。这是我正在使用的 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.