CSS：当鼠标悬停时，阴影不消失

Question

5

我做了一个带有几个按钮的小菜单。我给菜单按钮添加了阴影。它完美地运作。我想让菜单中的按钮看起来更像是真正的“按钮”，所以我想要一些“深度”。如果你玩弄阴影，这个效果可以很好地实现。如果没有任何操作，阴影应该在左上角。

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

为什么它不想消失？

- user1552839

只是说明一下，在IE6中，:hover伪类仅适用于链接。我怀疑您是否在使用它，但只是想指出这一点。 - Derek Hunziker

3

第三个值是“模糊半径”，您将其设置为“-3px”。由于不允许使用负数，因此没有阴影被绘制。请确认您是否已正确添加了CSS代码。 - thirtydot

2

@Derek Hunziker：什么？事实上，原帖中使用了圆角和盒子阴影，这应该使IE6完全无关紧要... - BoltClock

@thirtydot 给出了正确的答案；但是这个行为仍然很有趣。只需删除-3px或-即可使其正常工作。jsfiddle - Ross

3

你应该假装IE6不存在，除非有具体提到它 :) - thirtydot

显示剩余3条评论

2个回答

1

试试这个：

box-shadow: 0 0 0;

你的 li 元素是否应用了其他 CSS 样式？这可能会产生干扰。

- Moin Zaman

1

box-shadow: none;应该能够正常工作，因此我认为这并没有什么帮助。 - thirtydot

0 0 0无法工作。我现在要阅读链接。谢谢。 - user1552839

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ross · Accepted Answer

问题，如@thirtydot所指出的那样，是你的box-shadow属性值无效-模糊度不能为负数。 :hover并没有问题，您只需要从blur属性中删除-，代码就能正常工作了。

<blur-radius>（可选）
这是第三个<length>值。该值越大，模糊程度越大，因此阴影变得更大、更浅。不允许使用负值。如果未指定，则为0（阴影边缘锐利）。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow 奇怪的是，它似乎会破坏对hover的移除；而不是像输出带有锐利边缘的阴影那样忽略无效值。