Bagaimanakah Saya Boleh Membuat Senarai Item Separuh Lutsinar Kecuali Yang Dilegarkan?

Mencapai Kelegapan Separa pada Elemen Tidak Termasuk Yang Dilegar

Objektif siasatan ini adalah untuk meneroka kemungkinan menurunkan kelegapan elemen secara terpilih , khususnya senaraikan item (li), sambil mengecualikan item yang sedang dilegar. Kesan ini meniru isyarat visual yang menyerlahkan elemen berlegar.

Menggunakan Penyelesaian CSS

Untuk mencapai gelagat ini, kami menggunakan Helaian Gaya Cascading (CSS) peraturan:

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

Penjelasan

• Peraturan pertama menetapkan kelegapan semua item senarai dalam elemen senarai induk (ul) yang dilegar kepada 0.5, menjadikan mereka separa telus.
• Peraturan kedua mengatasi peraturan sebelumnya untuk item senarai yang dilegar, memulihkannya kelegapan kepada 1, menjadikannya legap dengan berkesan.

Pelaksanaan

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

li {
  float: left;
  width: 33.33%;
  line-height: 50px;
  background: grey;
  list-style-type: none;
}
ul:hover li {
  opacity: 0.5;
}
ul li:hover {
  opacity: 1;
}

Demonstrasi ini menggambarkan kesan yang diingini, di mana semua item senarai kecuali yang dilegar pada masa ini kelihatan separa telus apabila elemen senarai induk dilegar. Item yang dilegar kekal legap sepenuhnya, menyerlahkan kehadirannya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Senarai Item Separuh Lutsinar Kecuali Yang Dilegarkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!