Ich möchte alle :hover
CSS-Deklarationen ignorieren, wenn ein Benutzer unsere Website über ein Touch-Gerät besucht. Weil das :hover
CSS keinen Sinn ergibt und es sogar störend sein kann, wenn ein Tablet es beim Klicken / Tippen auslöst, weil es dann bleiben kann, bis das Element den Fokus verliert. Um ehrlich zu sein, ich weiß nicht, warum Touch-Geräte das Bedürfnis haben, überhaupt auszulösen :hover
- aber das ist Realität, also ist dieses Problem auch Realität.
a:hover {
color:blue;
border-color:green;
// etc. > ignore all at once for touch devices
}
Also, (wie) kann ich alle CSS- :hover
Deklarationen auf einmal (ohne jede kennen zu müssen) für Touch-Geräte entfernen / ignorieren, nachdem sie deklariert wurden?
Antworten:
Verwenden Sie dies: https://jsfiddle.net/57tmy8j3/
Wenn Sie interessiert sind, warum oder welche anderen Optionen es gibt, lesen Sie weiter.
Quick'n'dirty - entfernen: Hover-Stile mit JS
Sie können alle CSS-Regeln entfernen,
:hover
die Javascript enthalten. Dies hat den Vorteil, dass Sie CSS nicht berühren müssen und auch mit älteren Browsern kompatibel sind.Einschränkungen: Stylesheets müssen in derselben Domain gehostet werden (dh keine CDNs). Deaktiviert das Schweben auf gemischten Maus- und Touch-Geräten wie Surface oder iPad Pro, was die UX verletzt.
Nur CSS - Verwenden Sie Medienabfragen
Platzieren Sie alle Ihre: Hover-Regeln in einem
@media
Block:oder überschreiben Sie alternativ alle Ihre Hover-Regeln (kompatibel mit älteren Browsern):
Einschränkungen: Funktioniert nur unter iOS 9.0+, Chrome für Android oder Android 5.0+, wenn WebView verwendet wird.
hover: hover
Unterbricht Hover-Effekte in älteren Browsern undhover: none
muss alle zuvor definierten CSS-Regeln überschreiben. Beide sind nicht mit gemischten Maus- und Touch-Geräten kompatibel .Am robustesten: Erkennen Sie Berührungen über JS und stellen Sie CSS: Hover-Regeln voran
Diese Methode muss allen Hover-Regeln vorangestellt werden
body.hasHover
. (oder ein Klassenname Ihrer Wahl)Die
hasHover
Klasse kannhasTouch()
aus dem ersten Beispiel hinzugefügt werden :Dies hätte jedoch die gleichen Nachteile bei Mixed-Touch-Geräten wie bei den vorherigen Beispielen, was uns zur ultimativen Lösung bringt. Aktivieren Sie Hover-Effekte, wenn ein Mauszeiger bewegt wird. Deaktivieren Sie Hover-Effekte, wenn eine Berührung erkannt wird.
Dies sollte grundsätzlich in jedem Browser funktionieren und Hover-Stile nach Bedarf aktivieren / deaktivieren.
Hier ist das vollständige Beispiel - modern: https://jsfiddle.net/57tmy8j3/
Legacy (zur Verwendung mit alten Browsern): https://jsfiddle.net/dkz17jc5/19/
quelle
document.styleSheets
existiert, anstatt das zu verwendentry/catch
?try/catch
nur für den Fall verwendet , dass ein seltsamer Fehler auftritt, der das Skript zum Absturz bringen könnte, z. B. deleteRule, der aufgrund einer Richtlinie mit demselben Ursprung oder einer unzuverlässigen Unterstützung im IE nicht funktioniert (der Kommentar wurde entsprechend bearbeitet). Aber ja, in den meisten Fällen sollte nur eine einfache Überprüfung ausreichen.Zeigeranpassung an die Rettung!
Da dies seit einiger Zeit nicht mehr berührt wurde, können Sie Folgendes verwenden:
Sehen Sie sich diese Demo sowohl in Ihrem Desktop-Browser als auch in Ihrem Telefonbrowser an . Unterstützt von modernen Touch-Geräten .
Hinweis : Beachten Sie, dass der primäre Eingang (die Fähigkeit) eines Surface-PCs eine Maus ist und daher ein blauer Link ist, selbst wenn es sich um einen abgetrennten Bildschirm (Tablet) handelt. Browser werden (sollten) immer standardmäßig die präziseste Eingabefähigkeit verwenden.
quelle
Ich bin auf dasselbe Problem gestoßen (in meinem Fall mit mobilen Browsern von Samsung) und bin daher auf diese Frage gestoßen.
Dank der Antwort von Calsal habe ich etwas gefunden, von dem ich glaube, dass es praktisch alle Desktop-Browser ausschließt, da es von den von mir getesteten mobilen Browsern erkannt zu werden scheint (siehe Screenshot aus einer kompilierten Tabelle: CSS-Zeiger-Feature-Erkennungstabelle ).
MDN-Webdokumente geben dies an
.
Was ich entdeckt habe, ist dieser Zeiger: Grob ist etwas, das allen Desktop-Browsern in der angehängten Tabelle unbekannt ist, aber allen mobilen Browsern in derselben Tabelle bekannt ist. Dies scheint die effektivste Wahl zu sein, da alle anderen Zeigerschlüsselwortwerte inkonsistente Ergebnisse liefern.
Daher können Sie eine Medienabfrage wie die von Calsal beschriebene, aber leicht modifizierte erstellen . Es verwendet eine umgekehrte Logik, um alle Touch-Geräte auszuschließen.
Sass Mixin:
Kompiliertes CSS:
Es wird auch in diesem Kern beschrieben, den ich nach der Untersuchung des Problems erstellt habe. Codepen für empirische Forschung.
UPDATE : Ab dem Schreiben dieses Updates am 23.08.2018 und dem Hinweis von @DmitriPavlutin scheint diese Technik nicht mehr mit dem Firefox-Desktop zu funktionieren.
quelle
Laut Jasons Antwort können wir nur Geräte ansprechen, die Hover nicht mit reinen CSS-Medienabfragen unterstützen. Wir können auch nur Geräte ansprechen, die Hover unterstützen, wie die Antwort von moogal in einer ähnlichen Frage mit
@media not all and (hover: none)
. Es sieht komisch aus, aber es funktioniert.Ich habe daraus ein Sass-Mixin gemacht, um es einfacher zu machen:
Update 15.05.2019 : Ich empfehle diesen Artikel von Medium , der alle verschiedenen Geräte durchläuft, auf die wir mit CSS abzielen können. Im Grunde ist es eine Mischung dieser Medienregeln, kombinieren Sie sie für bestimmte Ziele:
Beispiel für bestimmte Ziele:
Ich liebe Mixins. So verwende ich mein Hover-Mixin nur für Geräte, die es unterstützen:
quelle
Ich habe es derzeit mit einem ähnlichen Problem zu tun.
Es gibt zwei Hauptoptionen , die zu mir kommen sofort: (1) Benutzer-string Prüfung, oder (2) Aufrechterhaltung separate mobile Seiten eine andere URL verwenden und mit Benutzer entscheiden , was für sie besser ist.
<link rel="mobile.css" />
anstelle des normalen Stils.Benutzerzeichenfolgen enthalten identifizierende Informationen zu Browser, Renderer, Betriebssystem usw. Es liegt an Ihnen, zu entscheiden, welche Geräte "touch" oder nicht "touch" sind. Möglicherweise können Sie diese Informationen irgendwo finden und Ihrem System zuordnen.
A. Wenn Sie alte Browser ignorieren dürfen , müssen Sie dem normalen, nicht mobilen CSS nur eine einzige Regel hinzufügen, nämlich:EDIT : Erk. Nach einigen Experimenten zu tun, entdeckte ich die folgenden Regel deaktiviert auch die Möglichkeit , Links in Webkit-Browser zusätzlich zu folgen ästhetische Effekte nur verursacht deaktiviert zu sein - siehe http://jsfiddle.net/3nkcdeao/Als solche, müssen Sie um ein bisschen selektiver zu sein, wie Sie Regeln für den mobilen Fall ändern als das, was ich hier zeige, aber es kann ein hilfreicher Ausgangspunkt sein:
Als Nebenbemerkung führt das Deaktivieren von Zeigerereignissen für ein übergeordnetes Element und das explizite Aktivieren dieser Zeigerereignisse für ein untergeordnetes Element derzeit dazu, dass Hover-Effekte auf das übergeordnete Element wieder aktiv werden, wenn ein untergeordnetes Element eingegeben wird
:hover
.Siehe http://jsfiddle.net/38Lookhp/5/
B. Wenn Sie ältere Web-Renderer unterstützen, müssen Sie etwas mehr Arbeit leisten, um Regeln zu entfernen, die währenddessen spezielle Stile festlegen
:hover
. Um allen Zeit zu sparen, möchten Sie möglicherweise nur einen automatischen Kopier- und Bereinigungsbefehl erstellen, den Sie auf Ihren Standard-Stylesheets ausführen, um die mobilen Versionen zu erstellen. Auf diese Weise können Sie einfach den Standardcode schreiben / aktualisieren und alle Stilregeln entfernen, die:hover
für die mobile Version Ihrer Seiten verwendet werden.Auch hier können Sie möglicherweise nur ein oder zwei zusätzliche Regeln zu den Stylesheets hinzufügen oder gezwungen sein, mit sed oder einem ähnlichen Dienstprogramm etwas Komplizierteres zu tun . Es wäre wahrscheinlich am einfachsten anzuwenden: Nicht auf Ihre Styling-Regeln, wie
div:not(.disruptive):hover {...
Sieclass="disruptive"
Elemente hinzufügen würden, die für mobile Benutzer mit js oder der Serversprache ärgerliche Dinge tun, anstatt das CSS zu mungieren.(II) Sie können die ersten beiden tatsächlich kombinieren und (wenn Sie den Verdacht haben, dass ein Benutzer zur falschen Version einer Seite gewechselt ist) vorschlagen, dass er in die Anzeige vom Typ Handy wechselt oder diese verlässt, oder einfach irgendwo einen Link haben, der ermöglicht es Benutzern, hin und her zu floppen. Wie bereits erwähnt, können @ media-Abfragen auch hilfreich sein, um festzustellen, was für einen Besuch verwendet wird.
(III) Wenn Sie sich für eine jQuery-Lösung entscheiden, sobald Sie wissen, welche Geräte "touch" sind und welche nicht, wird CSS-Hover auf Touchscreen-Geräten möglicherweise nicht ignoriert .
quelle
pointer-events
- das ist erstaunlich! Genau das habe ich gesucht, vielen Dank!<a>
Links bisher möglicherweise nicht zugegriffen werden kannpointer-events:none
. Mit etwas Glück wird sich das später ändern - oder CSS 3.x oder 4.0+ wirdpointer-events:navigation-only
oder ähnliches haben.Versuche dies:
UPDATE: Leider hat W3C diese Eigenschaft aus den Spezifikationen entfernt ( https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1 ).
quelle
Sie können Modernizr JS verwenden (siehe auch diese StackOverflow-Antwort ) oder eine benutzerdefinierte JS-Funktion erstellen:
So erkennen Sie die Unterstützung von Berührungsereignissen im Browser und weisen dann eine reguläre
CSS
Eigenschaft zu, die das Element mit derhtml.no-touch
Klasse wie folgt durchläuft :quelle
html
Tag anstelle desbody
Tags verwenden, ist das Lesen möglicherweise etwas besser. Das ist eigentlich die Lösung, die ich derzeit verwende. Trotzdem danke.Es war hilfreich für mich: Link
quelle
Dies ist auch eine mögliche Problemumgehung, aber Sie müssen Ihr CSS durchgehen und
.no-touch
vor Ihren Hover-Stilen eine Klasse hinzufügen .Javascript:
CSS-Beispiel:
Quelle
Ps Aber wir sollten uns daran erinnern, dass immer mehr Touch-Geräte auf den Markt kommen, die gleichzeitig auch die Mauseingabe unterstützen.
quelle
Dies ist möglicherweise noch keine perfekte Lösung (und es ist mit jQuery), aber vielleicht ist es eine Richtung / ein Konzept, an dem / dem gearbeitet werden muss: Wie wäre es umgekehrt? Dies bedeutet, dass die CSS-Status: hover standardmäßig deaktiviert und aktiviert werden, wenn irgendwo im Dokument ein Mausbewegungsereignis erkannt wird. Natürlich funktioniert dies nicht, wenn jemand js deaktiviert hat. Was könnte noch dagegen sprechen, es so zu machen?
Vielleicht so:
CSS:
jQuery:
quelle
$('body').one.('mousemove', ...)
Versuchen Sie dies (ich verwende Hintergrund und Hintergrundfarbe in diesem Beispiel):
CSS:
quelle
Der schmutzige Weg ... Nicht elegant, aber der einfachste Weg, der dich retten kann.
Entfernen Sie alles, was den Schwebeflug kennzeichnet.
quelle
Wenn Ihr Problem ist, wenn Sie Android und ganze Div berühren / tippen, bedeckt von blauer transparenter Farbe! Dann müssen Sie nur noch die ändern
CURSOR: POINTER; an CURSOR: STANDARD;
Verwenden Sie mediaQuery, um sich in Mobiltelefonen / Tablets zu verstecken.
Das funktioniert bei mir.
quelle
Probieren Sie diese einfache jquery-Lösung für 2019 aus, obwohl es schon eine Weile her ist.
füge dieses Plugin zu head hinzu:
src = "https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
füge dies zu js hinzu:
$ ("*"). on ("touchend", Funktion (e) {$ (this) .focus ();}); // gilt für alle Elemente
Einige vorgeschlagene Variationen davon sind:
$ (": input ,: checkbox,"). on ("touchend", Funktion (e) {(this) .focus);}); // Elemente angeben
$ ("*"). on ("click, touchend", Funktion (e) {$ (this) .focus ();}); // Klickereignis einschließen
css: body {cursor: pointer; } // irgendwo berühren, um einen Fokus zu beenden
Anmerkungen
Verweise:
https://code.jquery.com/ui/
https://api.jquery.com/category/selectors/jquery-selector-extensions/
quelle