Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Meredupkan Semua Elemen Kecuali Elemen yang Saya Tuding Menggunakan CSS?

Bagaimanakah Saya Boleh Meredupkan Semua Elemen Kecuali Elemen yang Saya Tuding Menggunakan CSS?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-23 04:55:14216semak imbas

How Can I Dim All Elements Except the One I Hover Over Using CSS?

Mengurangkan Kelegapan untuk Semua Elemen Kecuali Elemen Berlegar

Dalam CSS, anda boleh melaraskan kelegapan elemen untuk mengawal ketelusannya. Untuk mencapai kesan mengurangkan kelegapan semua elemen kecuali elemen yang dilegar, ikut langkah berikut:

  • Tetapkan kelegapan yang lebih rendah untuk semua elemen. Mulakan dengan menggunakan nilai kelegapan yang lebih rendah kepada semua elemen dalam bekas sasaran menggunakan sifat kelegapan. Ini akan mengurangkan keterlihatan mereka sambil membiarkan elemen yang dilegar tidak terjejas. Contohnya:
ul:hover li {
  opacity: 0.5;
}
  • Tetapkan semula kelegapan untuk elemen yang dilegar. Untuk menyerlahkan elemen yang dilegar, pulihkan kelegapannya kepada 1, iaitu lalainya nilai. Anda boleh mencapai ini menggunakan yang berikut:
ul li:hover {
  opacity: 1;
}
Nota: Peraturan ini digunakan pada elemen li dalam bekas ul yang mencetuskan kesan leding.

Contoh:

Pertimbangkan perkara berikut kod:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
ul:hover li {
  opacity: 0.5;
}
ul li:hover {
  opacity: 1;
}

Apabila menuding pada mana-mana item senarai (

  • ), semua item senarai lain akan pudar kepada 50% kelegapan, manakala item yang dilegar mengekalkan keterlihatan penuh.

    Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Meredupkan Semua Elemen Kecuali Elemen yang Saya Tuding Menggunakan CSS?. 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