Bagaimana Anda Boleh Menggayakan Item Senarai Secara Dinamik Menggunakan :after dan :hover dalam CSS?

Menggabungkan :after dan :hover untuk Penggayaan Senarai Dinamik

Dalam CSS, menggabungkan elemen pseudo seperti :after dengan keadaan hover boleh meningkatkan kesan visual item senarai. Katakan anda mempunyai senarai di mana item yang dipilih memaparkan bentuk anak panah menggunakan :selepas. Untuk mencapai kesan yang serupa untuk item yang dituding di atas, ikut langkah berikut:

Kod CSS yang disediakan mentakrifkan senarai gaya, dengan gaya lalai untuk semua item senarai (#alertlist li), gaya diubah suai untuk item terpilih (#alertlist li.selected), dan gaya untuk item yang dituding di atas (#alertlist li:hover).

Untuk menggabungkan :after dengan pemilih :hover, tambahkan :after ke #alertlist li:hover just seperti yang anda lakukan dengan #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>

Dengan menggabungkan :after pseudo-elemen dengan kedua-dua pemilih .selected dan :hover, anda boleh menggunakan bentuk anak panah dengan mudah pada kedua-dua senarai yang dipilih dan dilegar item, mencipta kiu visual yang dinamik dan menarik.

Atas ialah kandungan terperinci Bagaimana Anda Boleh Menggayakan Item Senarai Secara Dinamik Menggunakan :after dan :hover dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!