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>(オプション)
これは 3 番目の<length>値です。この値が大きいほどぼかしが大きくなり、影が大きく薄くなります。負の値は使用できません。指定がない場合は0（影のエッジがシャープ）となります。

hoverただし、削除が壊れているように見えるのは奇妙です。影が鋭いエッジで出力されるため、無効な値を無視するのではなく。

score 1 · Accepted Answer

これを試して：

box-shadow: 0 0 0;

に適用されている他の CSS はありますliか? それが干渉している可能性があります。

2 に答える 2