ここでは、`:after` と `:hover` を組み合わせる問題に焦点を当てた、いくつかのタイトル オプションを示します。 オプション 1 (直接的かつ簡潔): * CSS で :after と :hover を使用してホバリング矢印を作成するには? オプション 2

:after と :hover の組み合わせ

CSS は、さまざまな基準に基づいてターゲットを絞ったスタイルを可能にする幅広い疑似セレクターを提供します。このようなセレクターの 1 つは :after で、これを使用すると、選択した要素の後に要素を追加できます。もう 1 つの一般的に使用される疑似セレクターは、:hover です。これは、カーソルが要素上にあるときに要素をターゲットにします。

ここでの質問は、:after と :hover を組み合わせて、要素が次のいずれかのときに表示される矢印の形を作成しようとしています。選択されているか、カーソルが置かれています。質問で提供されている元のコードには、「選択された」クラスの要素にスタイルを適用する

<code class="css">#alertlist li.selected:after {
  ...
}</code>

が含まれています。ホバー機能を追加するには、ホバーされた要素に対して同様の :after ルールを含める必要があります。

<code class="css">#alertlist li.selected:after, #alertlist li:hover:after {
  ...
}</code>

#alertlist li:hover セレクターに :after を追加することで、スタイルが確実に適用されます。選択した要素は、ホバーしている要素にも適用されます。完全なコードは次のようになります。

<code class="css">#alertlist {
  ...
}

#alertlist li {
  ...
}

#alertlist li.selected,
#alertlist li:hover {
  ...
}

#alertlist li.selected:after, #alertlist li:hover:after {
  ...
}</code>

これで、矢印の形状は「選択された」クラスの要素だけでなく、ホバーされている要素にも表示されます。

以上がここでは、`:after` と `:hover` を組み合わせる問題に焦点を当てた、いくつかのタイトル オプションを示します。 オプション 1 (直接的かつ簡潔): * CSS で :after と :hover を使用してホバリング矢印を作成するには? オプション 2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。