CSS で :after および :hover を使用してリスト項目を動的にスタイル設定するにはどうすればよいですか?

動的リスト スタイリングのために :after と :hover を組み合わせる

CSS では、:after のような疑似要素とホバー状態を組み合わせると、リスト項目の視覚的な影響。 :after を使用して、選択した項目に矢印の形が表示されるリストがあるとします。マウスオーバーされている項目に対して同様の効果を実現するには、次の手順に従います。

提供された CSS コードは、すべてのリスト項目のデフォルト スタイル (#alertlist li)、選択された項目の変更されたスタイルを使用して、スタイル付きリストを定義します。 (#alertlist li.selected)、およびホバーされている項目のスタイル (#alertlist li:hover)。

:after と :hover セレクターを組み合わせるには、:after を #alertlist li:hover に追加します#alertlist li.selected:

<code class="css">#alertlist li.selected:after, #alertlist li:hover:after {
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}</code>

と同様に、:after 疑似要素を .selected セレクターと :hover セレクターの両方と組み合わせることで、選択されたリストとホバーされたリストの両方に矢印の形状を簡単に適用できます。アイテムを使用して、ダイナミックで魅力的な視覚的な手がかりを作成します。

以上がCSS で :after および :hover を使用してリスト項目を動的にスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。