Bagaimana untuk Menggayakan Kedua-dua Item Terpilih dan Berlegar dengan :after dalam CSS?

Menggabungkan :after dengan :hover dalam CSS

CSS menawarkan gabungan hebat elemen pseudo :after dan pseudo- :hover kelas, membolehkan pembangun mencipta kesan penggayaan dinamik. Soalan khusus ini berkisar tentang menggunakan penggayaan yang sama pada item apabila kedua-duanya dipilih dan dituding di atas.

Kod yang disediakan menunjukkan senarai item, di mana item yang dipilih (dengan kelas "dipilih") memaparkan anak panah bentuk menggunakan :selepas. Cabarannya terletak pada mereplikasi gelagat ini untuk item yang dilegar.

Penyelesaian yang dicadangkan dalam respons adalah untuk menambahkan :selepas pada #alertlist li:pemilih tuding dengan cara yang sama ia digunakan dengan #alertlist li.selected . Ini memastikan gaya yang sama digunakan pada kedua-dua item yang dipilih dan dilegar.

Berikut ialah kod yang dikemas kini:

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

Dengan melaksanakan perubahan ini, bentuk anak panah kini akan muncul bukan sahaja untuk yang dipilih item tetapi juga untuk item yang sedang dituding, memberikan petunjuk visual yang konsisten kepada pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Kedua-dua Item Terpilih dan Berlegar dengan :after dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!