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

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>

  Salin selepas log masuk

  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!