Bagaimanakah Saya Boleh Memastikan Keadaan Hover CSS Aktif Selepas Tetikus Meninggalkan Elemen?

Mengekalkan Keadaan Hover CSS Selepas "Nyah Legar"

Dalam reka bentuk web, keadaan lekukan sering digunakan untuk mendedahkan kandungan atau kesan tambahan semasa melayang atas sesuatu unsur. Walau bagaimanapun, keadaan ini biasanya hilang apabila penunjuk tetikus meninggalkan elemen. Artikel ini meneroka penyelesaian CSS untuk mengekalkan keadaan tuding walaupun selepas "menyahlegar."

Isu

Ramai pemula menghadapi cabaran untuk mengekalkan keadaan tuding. Sebagai contoh, pertimbangkan contoh kod berikut:

#about:hover #onabout {
  display: block;
}

Apabila menuding di atas elemen #about, elemen #onabout menjadi kelihatan. Walau bagaimanapun, ia hilang sebaik sahaja keadaan tuding tamat.

Penyelesaian CSS

Nasib baik, CSS menyediakan penyelesaian menggunakan lengah peralihan. Sifat ini menentukan masa untuk menunggu sebelum menggunakan peralihan CSS. Dengan menetapkannya kepada nilai bukan sifar, kita boleh menahan keadaan tuding seketika selepas menyahlegar.

div img {
  transition: 0s 180s;
  opacity: 0;
}

div:hover img {
  opacity: 1;
  transition: 0s;
}

Kod ini memastikan imej (img) kekal kelihatan selama 180 saat selepas dinyahlegar.

Pendekatan Alternatif

Satu lagi teknik CSS melibatkan penggunaan transformasi dan fokus untuk memadamkan imej selepas mengklik.

div:hover img:focus {
  transition: 3s;
  opacity: 0;
  transform: rotate(-360deg) scale(0.23);
}

Pendekatan ini memerlukan penambahan tabindex pada elemen dalam penanda HTML dan mengklik pada imej untuk mencetuskan kesan pudar.

Dengan menggunakan teknik CSS ini, anda boleh mengekalkan keadaan tuding walaupun selepas menyahlegar, mempertingkatkan pengalaman pengguna pada halaman web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan Keadaan Hover CSS Aktif Selepas Tetikus Meninggalkan Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!