Bagaimana untuk Menyerlahkan Item Menu Aktif Sambil Memalapkan Item Tidak Aktif dengan CSS?

Cara Menyerlahkan Item Menu Aktif dan Malapkan Item Bukan Aktif

Dalam coretan kod ini, kami menghadapi senario yang kami mahu malapkan kelegapan semua item menu (

elemen) apabila menu induk (

) dilegarkan. Walau bagaimanapun, item menu yang dilegar itu sendiri harus kekal pada kelegapan penuh.

Penyelesaian CSS

Untuk mencapai kesan ini, kami menggunakan CSS untuk melaraskan kelegapan menu secara dinamik item:

ul:hover li {
  opacity: 0.5;
}
ul li:hover {
  opacity: 1;
}

Penjelasan:

• Peraturan pertama (ul:hover li) menggunakan kelegapan 0.5 kepada semua
• elemen apabila ibu bapa mereka
  sedang berlegar. Ini meredupkan item menu yang tidak sedang dituding di atas.
  • Peraturan kedua (ul li:hover) menetapkan semula kelegapan kepada 1 untuk
  • elemen yang sebenarnya sedang dilegarkan. Ini memastikan item menu semasa kekal dalam keterlihatan penuh.

  Contoh

  Pertimbangkan kod HTML dan CSS berikut:

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  
  <style>
    li {
      float: left;
      width: 33.33%;
      line-height: 50px;
      background: gray;
      list-style-type: none;
    }
    ul:hover li {
      opacity: 0.5;
    }
    ul li:hover {
      opacity: 1;
    }
  </style>

  Apabila anda menuding pada

  elemen, semua
  • elemen kecuali yang anda tuding akan menjadi 50% telus, manakala
  • elemen akan kekal pada kelegapan penuh. Ini mencipta kesan sorotan halus, membimbing pengguna ke item menu aktif.

    Atas ialah kandungan terperinci Bagaimana untuk Menyerlahkan Item Menu Aktif Sambil Memalapkan Item Tidak Aktif dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!