CSS で :after を使用して選択した項目とホバーした項目の両方をスタイルする方法は?

CSS で :after と :hover を組み合わせる

CSS は、:after 擬似要素と :hover 擬似要素の強力な組み合わせを提供します。クラスを使用して、開発者が動的なスタイル効果を作成できるようにします。この特定の質問は、アイテムが選択されてカーソルが置かれているときに、アイテムに同じスタイルを適用することを中心に展開しています。

提供されたコードはアイテムのリストを示しており、選択されたアイテム (クラス「selected」) には矢印が表示されます。 :afterを使用してシェイプします。課題は、ホバーされている項目に対してこの動作を複製することです。

応答で提案されている解決策は、#alertlist li.selected で使用されるのと同じ方法で、#alertlist li:hover セレクターに :after を追加することです。 。これにより、選択された項目とホバーされた項目の両方に同じスタイルが適用されるようになります。

更新されたコードは次のとおりです:

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

この変更を実装すると、矢印の形状は選択された項目だけでなく表示されるようになります。アイテムだけでなく、カーソルが置かれているアイテムも対象となり、ユーザーに一貫した視覚的な合図を提供します。

以上がCSS で :after を使用して選択した項目とホバーした項目の両方をスタイルする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。