Rumah  >  Artikel  >  hujung hadapan web  >  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
Mary-Kate Olsenasal
2024-10-28 19:01:29951semak imbas

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>

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!

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