Warum funktioniert die Pseudoklasse „:active' nicht mit den <a>-Elementen von Mobile Safari und wie kann ich das Problem beheben?-CSS-Tutorial-php.cn

Warum funktioniert die Pseudoklasse „:active' nicht mit den -Elementen von Mobile Safari und wie kann ich das Problem beheben?

Susan Sarandon

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

Original

839 Leute haben es durchsucht

Why Doesn't :active Pseudo-Class Work on Mobile Safari's <a>Elemente und wie kann ich sie beheben? Elemente und wie kann ich das Problem beheben? " />

:aktive Pseudo-Klassen-Inaktivität in Mobile Safari

Problem:

In iOS-Browsern werden Stile für die :aktive Pseudo-Klasse angegeben. Die Klasse für -Elemente kann nicht aktiviert werden, wenn auf das Element getippt wird. Das Problem tritt in WebKit-basierten Browsern auf iPhones, iPads usw. auf iPods.

Codebeispiel:

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

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

Nach dem Login kopieren

Lösung:

Um dieses Problem in Mobile Safari zu beheben, wenden Sie an ontouchstart-Ereignis-Listener für das -Element:

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

Nach dem Login kopieren

Dieser globale Ereignis-Listener erweitert das Reaktionsfähigkeit aller Schaltflächen auf der Seite.

Alternative Lösung:

Ein alternativer Ansatz ist die Verwendung der Fastclick-JavaScript-Bibliothek:

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

Nach dem Login kopieren

Fastclick Beschleunigt Klickereignisse auf Touch-Geräten und behebt das :active-Pseudoklassenproblem.

Das obige ist der detaillierte Inhalt vonWarum funktioniert die Pseudoklasse „:active' nicht mit den -Elementen von Mobile Safari und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!