Bagaimanakah Kami Boleh Menghalang Kesan Leding Melekit pada Butang dalam Persekitaran Sentuhan?

Mary-Kate Olsen
Lepaskan: 2024-11-10 09:32:02
asal
579 orang telah melayarinya

How Can We Prevent Sticky Hover Effects on Buttons in Touch Environments?

Mengatasi Kesan Tuding Melekit pada Butang dalam Persekitaran Sentuhan

Apabila mereka bentuk antara muka pengguna dengan peranti sentuh dalam fikiran, menguruskan kesan tuding pada butang boleh menjadi cabaran. Tugasan yang kelihatan mudah ini menjadi rumit disebabkan oleh keadaan tuding berterusan yang berlaku pada skrin sentuh, di mana kesan tuding kekal diaktifkan selepas sentuhan, menghasilkan butang biru yang berterusan.

Penyelesaian Tidak Cekap

Walaupun penyelesaian wujud, seperti menambah kelas tanpa tuding pada sentuhan atau menggunakan kelas sentuh dengan documentElement, kaedah ini mempunyai kelemahan. Mereka boleh merendahkan prestasi dan gagal mengendalikan peranti dengan kedua-dua skrin sentuh dan keupayaan tetikus.

Penyelesaian Sukar

Penyelesaian yang ideal akan melibatkan mengalih keluar keadaan tuding semasa sentuhan, tetapi manipulasi langsung keadaan hover nampaknya sukar difahami. Memfokus pada tempat lain gagal untuk mengalih keluar kesan tuding, dan tindakan manual mengetik elemen lain nampaknya menyahaktifkannya, namun pencetus terprogram tindakan ini kekal sebagai misteri.

Satu Terobosan

Ketibaan Pertanyaan Media CSS Tahap 4 pada tahun 2018 membawa penyelesaian revolusioner kepada dilema ini:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}
Salin selepas log masuk

Pengisytiharan ini pada asasnya menyatakan: "Jika penyemak imbas menyokong pelekapan sebenar (cth., peranti input seperti tetikus ), gunakan gaya tuding apabila butang dituding ke atas."

Untuk penyemak imbas yang kekurangan ciri ini, poliisi boleh membantu. Dengan menggunakan polyfill ini, CSS futuristik di atas boleh diubah menjadi:

html.my-true-hover button:hover {
    background-color: blue;
}
Salin selepas log masuk

JavaScript sisi pelanggan daripada polyfill kemudian mengesan sokongan tuding dan menogol kehadiran kelas my-true-hover dengan sewajarnya, memberikan yang elegan penyelesaian kepada kesan tuding melekit pada peranti sentuh.

Atas ialah kandungan terperinci Bagaimanakah Kami Boleh Menghalang Kesan Leding Melekit pada Butang dalam Persekitaran Sentuhan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan