Bagaimana Membuat Item Senarai Tidak Dilegar Separuh Telus Menggunakan CSS?

Memanipulasi Kelegapan pada Elemen Tidak Berlegar

Dalam penanda HTML anda, anda boleh melaraskan kelegapan semua item senarai (LI) secara dinamik kecuali yang sedang berlegar. Teknik ini mencipta kesan apabila elemen yang tidak dilegar menjadi telus secara halus manakala item yang dilegar kekal kelihatan sepenuhnya.

Untuk mencapai ini, CSS boleh dimanfaatkan:

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

Dalam coretan kod ini:

• Baris pertama mengurangkan kelegapan semua LI (kecuali item yang dilegar) kepada 50%, menjadikannya kelihatan separa lutsinar.
• Barisan kedua memastikan LI yang dilegar mengekalkan kelegapan 1, mengekalkannya legap.

Contoh HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS Gaya:

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

li {
  width: 100px;
  height: 100px;
  background-color: gray;
  margin-right: 10px;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

Hasil:

Apabila anda menuding pada LI, kelegapannya akan kekal pada 1, manakala semua LI yang lain akan menjadi separuh- telus. Ini memberikan isyarat visual untuk elemen yang sedang aktif.

Atas ialah kandungan terperinci Bagaimana Membuat Item Senarai Tidak Dilegar Separuh Telus Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!