css - CSS：悬停时阴影不会消失

Question

我用几个按钮做了一个小菜单。我为菜单按钮添加了阴影。它完美地工作。我想在菜单中做一些“深度”，让它们真正成为“按钮”。如果您使用阴影，这很有效。没有任何动作，阴影应该在左上角。

#menu ul li {
    -moz-box-shadow: -3px -3px -3px #888;
    -webkit-box-shadow: -3px -3px -3px #888;
    box-shadow: -3px -3px -3px #888;
}

但是一旦我将鼠标悬停在它上面，这个影子就不想走，即使我想走

#menu ul li:hover {
    border-radius: 5px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

为什么它不想离开？

score 4 · Accepted Answer

正如@thirtydot 所指出的，问题在于您box-shadow的值无效-blur不能为负数。

没有任何问题:hover，您只需-从blur属性中删除，代码就可以工作了。

<blur-radius>（可选）
这是第三个<length>值。这个值越大，模糊越大，所以阴影变得更大更亮。不允许使用负值。如果未指定，它将是0（阴影的边缘是锐利的）。

奇怪的是，它似乎打破了移除hover；而不是仅仅忽略无效值，因为阴影仍然以锐利的边缘输出。

score 1 · Accepted Answer

尝试这个：

box-shadow: 0 0 0;

是否有任何其他 CSS 应用于您的li？那可能是干扰。

2 回答 2