選択されホバーされたリスト項目の矢印インジケーターをスタイルするにはどうすればよいですか?

:after と :hover を組み合わせた矢印インジケーターのスタイル

:after と :hover を組み合わせて、矢印インジケーターを作成することを目的としています。リスト項目。項目が選択されるか、項目の上にマウスが置かれると、この矢印が表示されます。

提供されたコードでは、:after を使用して、選択された項目の矢印インジケーターのスタイルが正しく設定されています。ホバーされたアイテムに同じスタイルを適用するには、:hover セレクターに :after を追加するだけです。

更新された CSS は次のとおりです:

<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>

この変更されたコードにより、矢印インジケーターが両方の場所に表示されるようになります。意図したとおり、選択されホバーされたリスト項目に対して。

以上が選択されホバーされたリスト項目の矢印インジケーターをスタイルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。