Hover panjang

Baru -baru ini, saya mengalami pengawasan CSS yang agak memalukan. Saya sedang membangunkan laman web dengan sidebar sempit yang mengandungi ikon. Kekurangan ruang untuk teks deskriptif, reka bentuk yang dipanggil untuk diakses, namun pada mulanya tersembunyi, tooltips yang dicetuskan oleh hover yang berpanjangan. Petua alat akan muncul selepas hover tiga saat.

Pendekatan awal saya melibatkan pengurusan negeri JavaScript:

1. Pembolehubah negeri untuk mengesan penglihatan alat (kelihatan/tersembunyi). Negeri ini akan mengemas kini kelas pada elemen HTML yang berkaitan.
2. Pendengar acara ( mouseenter , mouseleave ) untuk menguruskan peralihan negeri.
3. Kelewatan tiga saat sebelum menetapkan keadaan untuk visible pada mouseenter .
4. Petua akan tetap tersembunyi ( mouseleave ).

Ini adalah projek React, jadi menggunakan keadaan JavaScript terasa semula jadi. Walau bagaimanapun, dalam penglihatan semula, ia terbukti tidak perlu kompleks. Peristiwa mouseenter dan mouseleave terasa sedikit tidak boleh dipercayai, dan keseluruhan fungsi dapat dilaksanakan dengan lebih ringkas dan cekap dengan CSS sahaja.

Kesedaran yang memalukan: Saya tidak perlu memanfaatkan perpustakaan JavaScript apabila penyelesaian CSS sedia ada.

Saya mengekalkan UI React tetapi mengeluarkan pengurusan negeri JavaScript. Penyelesaian ini melibatkan harta transition-delay CSS yang mudah:

 .thing {
  Peralihan: 0.2s;
}
.thing: hover {
  Peralihan-kelewatan: 3s; / * kelewatan hover animasi hanya, tidak */
}

Ini satu-liner elegan sempurna mencapai kesan jangka panjang yang dikehendaki.

Pendekatan ini, bagaimanapun, tidak sepenuhnya menangani kebolehcapaian skrin sentuh. Walaupun pembaca skrin mengendalikan teks yang boleh diakses dan pengguna desktop mendapat manfaat daripada petua, pengguna sentuh sahaja mungkin terlepas label ikon. Projek saya mensasarkan skrin besar, dengan mengandaikan ketersediaan kursor, tetapi akses sentuhan tetap menjadi kebimbangan. Jika elemen adalah pautan, :hover mungkin diaktifkan pada ketuk awal. Jika pautan membawa kepada halaman dengan tajuk yang jelas, itu mungkin memberikan konteks yang mencukupi. Jika tidak, pengendalian acara JavaScript untuk acara sentuhan tetap menjadi pilihan yang sesuai.

Atas ialah kandungan terperinci Hover panjang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!