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类。一个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。您应该在none中将其设置为:hover。

像这样：

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

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

2 个答案: