CSS：悬停时阴影不会消失答案

【问题标题】：CSS: Shadow doesn't go away when hoveringCSS：悬停时阴影不会消失
【发布时间】：2012-07-25 21:23:42
【问题描述】：

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

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

它为什么不想走？

【问题讨论】：

标签： css shadows

【解决方案1】：

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

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

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

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

【讨论】：

嗯，这很奇怪。在 Chrome 中，确实存在使用负模糊半径绘制的阴影，但仅当元素上有背景时。越野车 WebKit！ Firefox 的行为符合我的预期。如果 OP 使用的是 Chrome，那么这可能就是问题所在。与 0 相比，-3px 的 Chrome 行为不同...
@thirtydot：我永远无法理解为什么每个人都喜欢 WebKit 到崇拜它的地步。这是令人难以置信的错误，几乎在 IE 级别。 Bleurgh。（我正在研究响应式设计，几分钟前它刚刚使 Chrome 和 IE9 崩溃...）
添加 -webkit-transform: scale3d(1,1,1); which sometimes fixes WebKit bugs involving redraws 使 Chrome 在这种带有无效负模糊半径的完全愚蠢的情况下正常工作：jsfiddle.net/thirtydot/zbMzb/3（阴影未绘制）

【解决方案2】：

试试这个：

box-shadow: 0 0 0;

还有其他 CSS 应用到您的 li 吗？这可能会造成干扰。

【讨论】：