Heim >Web-Frontend >CSS-Tutorial >Warum funktioniert die Pseudoklasse „:active' nicht mit den -Elementen von Mobile Safari und wie kann ich das Problem beheben?
Warum funktioniert die Pseudoklasse „:active' nicht mit den -Elementen von Mobile Safari und wie kann ich das Problem beheben?
- Susan SarandonOriginal
- 2024-11-30 02:54:14854Durchsuche
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>
Lösung:
Um dieses Problem in Mobile Safari zu beheben, wenden Sie an ontouchstart-Ereignis-Listener für das
-Element:<body ontouchstart=""> ... </body>
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>
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!