Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menggayakan Penunjuk Anak Panah untuk Item Senarai Terpilih dan Dilegar?

Bagaimana untuk Menggayakan Penunjuk Anak Panah untuk Item Senarai Terpilih dan Dilegar?

Mary-Kate Olsen
Lepaskan: 2024-10-28 19:01:29
asal
1063 orang telah melayarinya

How to Style an Arrow Indicator for Selected and Hovered List Items?

Menggayakan Penunjuk Anak Panah dengan Gabungan :after dan :hover

Anda bertujuan untuk menggabungkan :after dengan :hover untuk mencipta petunjuk anak panah untuk item senarai. Apabila item dipilih atau dituding di atas, anak panah ini akan muncul.

Dalam kod yang anda berikan, anda telah menggayakan penunjuk anak panah dengan betul untuk item yang dipilih menggunakan :after. Untuk menggunakan penggayaan yang sama pada item yang dilegar, cuma tambahkan :selepas pada pemilih :hover.

Berikut ialah CSS 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>
Salin selepas log masuk

Kod yang diubah suai ini memastikan penunjuk anak panah dipaparkan kedua-duanya untuk item senarai yang dipilih dan dilegar, seperti yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Penunjuk Anak Panah untuk Item Senarai Terpilih dan Dilegar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan