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

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>

    Salin selepas log masuk

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

    Salin selepas log masuk

    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!