CSS 疑似要素にホバー効果を適用するにはどうすればよいですか?

CSS: ホバー条件を擬似要素に適用する

問題:

ユーザーが適用しようとすると問題が発生する可能性がありますホバー条件を擬似要素に追加します。たとえば、:before に :hover を適用すると、望ましい効果が得られない可能性があります。

セレクターの順序について:

CSS セレクターを作成するときは、正しい順序を守ることが重要です。 。仕様によれば、擬似要素は単純なセレクターのシーケンスの末尾に追加する必要があります。単純なセレクターには、タイプ、ユニバーサル、属性、クラス、ID、または擬似クラスを指定できます。

適切な構文:

擬似オブジェクトにスタイルを正しく適用するには、関連する要素が疑似クラスに一致する場合、次の構文に従います。

• の場合CSS3: a:hover::before
• 従来のブラウザの場合: a:hover:before

擬似要素にカーソルを合わせる:

ホバー効果が疑似要素のインタラクションのみを目的としている場合、CSS は現在、簡単な機能を提供していません。 解決。このような場合、代わりにホバー条件を実際の子要素に適用することが必要になる場合があります。

特殊なケース: 疑似クラスのリンク

次のような疑似クラスをリンクします。 :visited は、疑似要素自体がリンクではないため、動作が異なります。したがって、:visited を :before に適用すると、期待どおりの効果が得られます。

以上がCSS 疑似要素にホバー効果を適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。