Bagaimana untuk Mengekalkan Kelegapan Elemen Berlegar Semasa Mengurangkan Orang Lain dalam CSS?

Mencapai Kelegapan Pembolehubah pada Elemen Kecuali Yang Dilegar

Anda mempunyai koleksi elemen, seperti

tag, dan anda ingin menurunkan kelegapan kesemuanya apabila elemen induk dilegar. Walau bagaimanapun, anda mahu kelegapan kekal tidak berubah untuk elemen yang dilegar terus.

Ini boleh dicapai menggunakan CSS. Dengan menggunakan gaya tuding pada elemen induk dan membalikkannya untuk elemen yang dilegar, anda boleh mencapai kesan yang diingini:

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

Teknik ini berfungsi seperti berikut:

• Apabila induk
  elemen dilegar, semua
  • elemen di dalamnya akan mengurangkan kelegapannya kepada 0.5.
  • Apabila anda menuding pada
  • elemen, gaya tuding untuk
    digunakan, mengurangkan kelegapan kepada 0.5. Walau bagaimanapun, gaya tuding untuk
    • menetapkan semula kelegapan kembali kepada 1.

    Ini menghasilkan kesan yang diingini, di mana semua

  • elemen kecuali yang dilegar mempunyai kelegapannya dikurangkan, manakala elemen yang dilegar kekal tidak terjejas.

    Contoh

    Berikut ialah contoh HTML dan CSS mudah untuk menunjukkan teknik ini:

    <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;
    }

    Nota: Teknik ini boleh digunakan untuk mencapai pelbagai kesan kelegapan pada elemen berbeza berdasarkan interaksi tuding atau acara lain.

    Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Kelegapan Elemen Berlegar Semasa Mengurangkan Orang Lain dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!