Mengapa :active Pseudo-Class Tidak Berfungsi pada Elemen <a> Mobile Safari dan Bagaimana Saya Boleh Membetulkannya?-tutorial css-php.cn

Mengapa :active Pseudo-Class Tidak Berfungsi pada Elemen Mobile Safari dan Bagaimana Saya Boleh Membetulkannya?

Susan Sarandon

Lepaskan： 2024-11-30 02:54:14

asal

912 orang telah melayarinya

Why Doesn't :active Pseudo-Class Work on Mobile Safari's <a> Elemen, dan Bagaimana Saya Boleh Membetulkannya? Elemen, dan Bagaimana Saya Boleh Membetulkannya? " />

:Ketidakaktifan Kelas Pseudo aktif dalam Safari Mudah Alih

Masalah:

Dalam pelayar iOS, menentukan gaya untuk pseudo- :active kelas untuk elemen gagal diaktifkan apabila elemen diketuk Isu berlaku dalam berasaskan WebKit penyemak imbas pada iPhone, iPad dan iPod.

Contoh Kod:

<style>
  a:active {
    background-color: red;
  }
</style>

<!-- snip -->
<a href="#">Click me</a>

Salin selepas log masuk

Penyelesaian:

Untuk menyelesaikan masalah ini isu dalam Safari Mudah Alih, gunakan pendengar acara ontouchstart pada elemen:

<body ontouchstart="">
  ...
</body>

Salin selepas log masuk

Pendengar acara global ini meningkatkan responsif semua butang pada halaman.

Penyelesaian Alternatif:

Pendekatan alternatif ialah untuk menggunakan perpustakaan JavaScript Fastclick:

<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<script>
  FastClick.attach(document.body);
</script>

Salin selepas log masuk

Fastclick mempercepatkan acara klik pada peranti sentuh dan alamat isu kelas pseudo :aktif.

Atas ialah kandungan terperinci Mengapa :active Pseudo-Class Tidak Berfungsi pada Elemen Mobile Safari dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!