Bagaimana untuk Mengubah :Tuding Animasi kepada Interaksi Klik/Sentuh untuk Peranti Mudah Alih?

Kesan Tuding Merentasi Platform: Mengubah :tuding menjadi Klik/Sentuh

Peranti mudah alih memberikan cabaran unik untuk animasi dipacu CSS yang dicetuskan oleh : berlegar. Untuk memastikan pengalaman pengguna yang lancar, pembangun selalunya perlu menyesuaikan kesan ini untuk berfungsi dengan peristiwa sentuhan atau klik. Artikel ini meneroka penyelesaian mudah untuk menukar animasi :hover kepada interaksi berasaskan klik untuk peranti mudah alih.

Contoh berikut menunjukkan animasi yang dicetuskan oleh :hover pada bar maklumat. Apabila lebar skrin melebihi 700px, animasi kekal boleh dicetuskan dengan tuding. Walau bagaimanapun, untuk skrin yang lebih kecil, animasi diubah suai untuk dicetuskan oleh peristiwa klik.

Animasi CSS:

.info-slide {
  transition: height .4s ease-in-out;
  height: 60px;
  background: url(../images/blue-back.png);
}

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

Pertanyaan Media untuk Peralihan Responsif :

@media screen and (max-width: 700px) {
  .info-slide {
    cursor: pointer;
  }

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

Dalam penyelesaian ini, kami menggunakan pemilih :aktif dalam sempena :hover. Menurut w3schools, pendekatan ini secara berkesan mengubah animasi menjadi interaksi berasaskan klik atau sentuhan apabila lebar skrin di bawah 700px.

Menguji penyelesaian ini dalam persekitaran mudah alih mengesahkan bahawa animasi bertindak balas sewajarnya, memberikan pengguna yang konsisten pengalaman merentas peranti.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah :Tuding Animasi kepada Interaksi Klik/Sentuh untuk Peranti Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!