Bagaimana Saya Boleh Menggantikan Animasi :hover dengan Sentuhan/Klik pada Peranti Mudah Alih?

Menggantikan :hover dengan Sentuh/Klik pada Peranti Mudah Alih

Dalam situasi di mana anda mempunyai animasi CSS yang dicetuskan oleh :hover, cabaran timbul apabila halaman anda diakses pada peranti mudah alih, yang menuding tidak disokong. Untuk menangani perkara ini, anda boleh menggunakan pertanyaan media untuk beralih daripada acara :hover kepada on-touch atau on-click sambil mengekalkan gelagat yang diingini.

Dalam kes khusus anda, CSS anda pada masa ini mencetuskan animasi pada :hover. Untuk memanjangkan fungsi ini kepada peranti mudah alih, anda boleh menambah pemilih :active dalam kombinasi dengan :hover dalam kelas .info-slide, memastikan pemilih :active muncul selepas :hover dalam kod.

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

Dengan menggunakan pemilih ini, anda boleh mencapai gelagat yang diingini, di mana animasi dicetuskan pada kedua-dua :hover untuk peranti desktop dan pada sentuhan/klik untuk peranti mudah alih. Untuk menguji keberkesanan penyelesaian ini, anda boleh mengakses JSFiddle yang disediakan dalam persekitaran mudah alih.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menggantikan Animasi :hover dengan Sentuhan/Klik pada Peranti Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!