0

:after で :not() セレクター/擬似的なものを使用することは可能ですか?

たとえば、次のような場合：

li:hover > ul
{
    display: block;
}

li:after
{
    content: " ";
    width: 200px;
    height: 200px;
    background: #cccccc;
    position: absolute;
    top: -100px;
    left: -100px;
}

after によって作成されたコンテンツの上に人がホバーすると、子メニューの表示もブロックされます。つまり、LI または AFTER コンテンツの他のホバリングは、LI のホバリングとして認識されます。これを停止するにはどうすればよいので、AFTER を使用して作成されたコンテンツではなく、ACTUAL LI をホバリングしたときにのみ表示ブロックを行います。

私は考えました：li:hover:not(:after) > ul { display: none; }しかし、うまくいきませんでした...

も試しli:after:hover > ulましたが、うまくいきませんでした。

これについてのアイデアはありますか？些細なことのように思えるかもしれませんが、設計に問題が発生するため、できるだけ早く停止する必要があります。

4

2 に答える 2

1

ご覧のとおり:hover、要素のスタイルは、子孫や疑似要素を含むコンテンツにカーソルを合わせるとトリガーされます。:hoverただし、要素のスタイルが疑似要素に適用されるのを防ぐことはできず、疑似要素を選択するために:after使用することもできません(これは、仕様によって明示的に禁止されています)。:not():after

これは仕様によるものであるため、唯一の回避策は を使用せず、JavaScript を使用して、 に追加して効果をキャンセル:afterできる他の要素を生成することです。li:hover

于 2012-06-30T16:46:07.830 に答える