Bagaimana untuk Melaraskan Animasi :hover untuk Interaksi Peranti Mudah Alih?

Melaraskan Animasi :hover untuk Interaksi Peranti Mudah Alih

Anda telah menghadapi isu di mana animasi CSS :hover, yang mengembangkan panel, tidak mencetuskan pada mudah alih peranti kerana ketiadaan tetikus melayang. Untuk menangani perkara ini, anda bertujuan untuk menukar pencetus kepada 'klik' atau 'sentuh' apabila lebar halaman di bawah 700px.

Untuk mencapainya, anda boleh menggunakan gabungan pemilih :hover dan :active. Dengan memesan pemilih dengan :active after :hover dalam CSS anda, anda boleh memastikan bahawa tindakan sentuhan atau klik pada panel anda juga akan mencetuskan animasi. Berikut ialah CSS yang dikemas kini:

.info-slide:hover, .info-slide:active {
  height: 300px;
}

Perubahan ini memastikan bahawa panel akan berkembang apabila menuding atau menyentuh pada kedua-dua desktop dan peranti mudah alih. Untuk mengesahkan kefungsiannya, disyorkan untuk mengujinya dalam persekitaran mudah alih sebenar, kerana simulator mungkin tidak memberikan hasil yang tepat.

Atas ialah kandungan terperinci Bagaimana untuk Melaraskan Animasi :hover untuk Interaksi Peranti Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!