Webkit フィルターのホバーによりスタック順序が変更される理由とそれを元に戻す方法は?

Webkit フィルターのホバーにより重なり順が変更される理由

ホバー中の画像に Webkit フィルターを適用すると、予期しない変化に気づく場合があります。その積み重ね順序。これは、フィルターによるスタッキング コンテキストの作成が原因です。

Webkit フィルター プロパティを none 以外の値に設定すると、スタッキング コンテキストが確立されます。スタッキング コンテキストは、要素がドキュメント ツリーに含まれる順序で、または z-index プロパティによって積み重ねられる 3 次元空間です。これは、スタッキング コンテキスト内の要素が常にコンテキスト外の要素の上に表示されることを意味します。

この場合、画像に適用された Webkit フィルターによってスタッキング コンテキストが作成されます。画像要素はこのコンテキスト内に配置されますが、絶対的に配置された DIV「slide-content」はコンテキストの外にあります。画像の上にマウスを置くとフィルターが適用され、スタッキング コンテキストが作成され、画像が DIV の上に重ねられて隠れます。

効果の反転

絶対的に配置された DIV が非表示にならないようにするには、Webkit フィルターを削除するか、カーソルを合わせたときにその値を none に設定します。更新された CSS は次のとおりです:

<code class="css">li a:hover img {
  -webkit-filter: none; /* or filter: none; to remove the filter altogether */
}</code>

これにより、ホバー時にフィルターが無効になり、Z インデックスを使用せずに DIV が適切に表示されるようになります。

以上がWebkit フィルターのホバーによりスタック順序が変更される理由とそれを元に戻す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。