So entfernen / ignorieren Sie: Bewegen Sie den Mauszeiger über den CSS-Stil auf Touch-Geräten

Ich möchte alle :hoverCSS-Deklarationen ignorieren, wenn ein Benutzer unsere Website über ein Touch-Gerät besucht. Weil das :hoverCSS 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- :hoverDeklarationen auf einmal (ohne jede kennen zu müssen) für Touch-Geräte entfernen / ignorieren, nachdem sie deklariert wurden?

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, :hoverdie Javascript enthalten. Dies hat den Vorteil, dass Sie CSS nicht berühren müssen und auch mit älteren Browsern kompatibel sind.

function hasTouch() {
  return 'ontouchstart' in document.documentElement
         || navigator.maxTouchPoints > 0
         || navigator.msMaxTouchPoints > 0;
}

if (hasTouch()) { // remove all the :hover stylesheets
  try { // prevent exception on browsers not supporting DOM styleSheets properly
    for (var si in document.styleSheets) {
      var styleSheet = document.styleSheets[si];
      if (!styleSheet.rules) continue;

      for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
        if (!styleSheet.rules[ri].selectorText) continue;

        if (styleSheet.rules[ri].selectorText.match(':hover')) {
          styleSheet.deleteRule(ri);
        }
      }
    }
  } catch (ex) {}
}

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 @mediaBlock:

@media (hover: hover) {
  a:hover { color: blue; }
}

oder überschreiben Sie alternativ alle Ihre Hover-Regeln (kompatibel mit älteren Browsern):

a:hover { color: blue; }

@media (hover: none) {
  a:hover { color: inherit; }
}

Einschränkungen: Funktioniert nur unter iOS 9.0+, Chrome für Android oder Android 5.0+, wenn WebView verwendet wird. hover: hoverUnterbricht Hover-Effekte in älteren Browsern und hover: nonemuss 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)

body.hasHover a:hover { color: blue; }

Die hasHoverKlasse kann hasTouch()aus dem ersten Beispiel hinzugefügt werden :

if (!hasTouch()) document.body.className += ' hasHover'

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.

function watchForHover() {
  // lastTouchTime is used for ignoring emulated mousemove events
  let lastTouchTime = 0

  function enableHover() {
    if (new Date() - lastTouchTime < 500) return
    document.body.classList.add('hasHover')
  }

  function disableHover() {
    document.body.classList.remove('hasHover')
  }

  function updateLastTouchTime() {
    lastTouchTime = new Date()
  }

  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)

  enableHover()
}

watchForHover()

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/

Zeigeranpassung an die Rettung!

Da dies seit einiger Zeit nicht mehr berührt wurde, können Sie Folgendes verwenden:

a:link {
   color: red;
}

a:hover {
   color:blue;
}

@media (hover: none) {
   a:link {
      color: red;
   }
}

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.

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

Mit der Zeigerfunktion CSS @media können Stile angewendet werden, die darauf basieren, ob der primäre Eingabemechanismus des Benutzers ein Zeigegerät ist und wenn ja, wie genau er ist

.

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:

@mixin hover-supported {    
    /* 
     * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer 
     * coarse: The primary input mechanism includes a pointing device of limited accuracy.
     */
    @media not all and (pointer: coarse) {
        &:hover {
            @content;
        }
    }
}

a {
    color:green;
    border-color:blue;

    @include hover-supported() {
        color:blue;
        border-color:green;
    }
}

Kompiliertes CSS:

a {
  color: green;
  border-color: blue;
}
@media not all and (pointer: coarse) {
  a:hover {
    color: blue;
    border-color: green;
  }
}

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.

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:

@mixin hover-supported {
    @media not all and (hover: none) {
        &:hover {
            @content;
        }
    }
}

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:

@media (hover: hover) {
    /* Device that can hover (desktops) */
}
@media (hover: none) {
    /* Device that can not hover with ease */
}
@media (pointer: coarse) {
    /* Device with limited pointing accuracy (touch) */
}
@media (pointer: fine) {
    /* Device with accurate pointing (desktop, stylus-based) */
}
@media (pointer: none) {
    /* Device with no pointing */
}

Beispiel für bestimmte Ziele:

@media (hover: none) and (pointer: coarse) {
    /* Smartphones and touchscreens */
}

@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
}

Ich liebe Mixins. So verwende ich mein Hover-Mixin nur für Geräte, die es unterstützen:

@mixin on-hover {
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            @content;
        }
    }
}

button {
    @include on-hover {
        color: blue;
    }
}

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.

1. Wenn Sie eine Internet-Klebebandsprache wie PHP oder Ruby verwenden können, können Sie die Benutzerzeichenfolge des Geräts überprüfen, das eine Seite anfordert, und einfach denselben Inhalt bereitstellen, jedoch mit einem <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:

* { 
    pointer-events: none !important; /* only use !important if you have to */
}

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 :hoverfür die mobile Version Ihrer Seiten verwendet werden.

2. (I) Alternativ einfach machen Ihre Benutzer bewusst , dass Sie eine haben m.website.com für mobile Geräte zusätzlich zu Ihrem website.com . Obwohl Subdomaining die häufigste Methode ist, können Sie auch eine andere vorhersehbare Änderung einer bestimmten URL vornehmen, damit mobile Benutzer auf die geänderten Seiten zugreifen können. Zu diesem Zeitpunkt möchten Sie sicher sein, dass sie die URL nicht jedes Mal ändern müssen, wenn sie zu einem anderen Teil der Site navigieren.

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 {...Sie class="disruptive"Elemente hinzufügen würden, die für mobile Benutzer mit js oder der Serversprache ärgerliche Dinge tun, anstatt das CSS zu mungieren.

2. (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.

3. (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 .

Versuche dies:

@media (hover:<s>on-demand</s>) {
    button:hover {
        background-color: #color-when-NOT-touch-device;
    }
}

UPDATE: Leider hat W3C diese Eigenschaft aus den Spezifikationen entfernt ( https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1 ).

Sie können Modernizr JS verwenden (siehe auch diese StackOverflow-Antwort ) oder eine benutzerdefinierte JS-Funktion erstellen:

function is_touch_device() {
 return 'ontouchstart' in window        // works on most browsers 
  || navigator.maxTouchPoints;       // works on IE10/11 and Surface
};

if ( is_touch_device() ) {
  $('html').addClass('touch');
} else {
  $('html').addClass('no-touch');
} 

So erkennen Sie die Unterstützung von Berührungsereignissen im Browser und weisen dann eine reguläre CSSEigenschaft zu, die das Element mit der html.no-touchKlasse wie folgt durchläuft :

html.touch a {
    width: 480px;
}

/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch a:hover {
   width: auto;
   color:blue;
   border-color:green;
}

Es war hilfreich für mich: Link

function hoverTouchUnstick() {
    // Check if the device supports touch events
    if('ontouchstart' in document.documentElement) {
        // Loop through each stylesheet
        for(var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
            var sheet = document.styleSheets[sheetI];
            // Verify if cssRules exists in sheet
            if(sheet.cssRules) {
                // Loop through each rule in sheet
                for(var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
                    var rule = sheet.cssRules[ruleI];
                    // Verify rule has selector text
                    if(rule.selectorText) {
                        // Replace hover psuedo-class with active psuedo-class
                        rule.selectorText = rule.selectorText.replace(":hover", ":active");
                    }
                }
            }
        }
    }
}

Dies ist auch eine mögliche Problemumgehung, aber Sie müssen Ihr CSS durchgehen und .no-touchvor Ihren Hover-Stilen eine Klasse hinzufügen .

Javascript:

if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}

CSS-Beispiel:

<style>
p span {
    display: none;
}

.no-touch p:hover span {
    display: inline;
}
</style>
<p><a href="/">Tap me</a><span>You tapped!</span></p>

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.

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:

/* will only work if html has class "mousedetected" */
html.mousedetected a:hover {
   color:blue;
   border-color:green;
}

jQuery:

/* adds "mousedetected" class to html element if mouse moves (which should never happen on touch-only devices shouldn’t it?) */
$("body").mousemove( function() {
    $("html").addClass("mousedetected");
});

Versuchen Sie dies (ich verwende Hintergrund und Hintergrundfarbe in diesem Beispiel):

var ClickEventType = ((document.ontouchstart !== null) ? 'click' : 'touchstart');

if (ClickEventType == 'touchstart') {
            $('a').each(function() { // save original..
                var back_color = $(this).css('background-color');
                var background = $(this).css('background');
                $(this).attr('data-back_color', back_color);
                $(this).attr('data-background', background);
            });

            $('a').on('touchend', function(e) { // overwrite with original style..
                var background = $(this).attr('data-background');
                var back_color = $(this).attr('data-back_color');
                if (back_color != undefined) {
                    $(this).css({'background-color': back_color});
                }
                if (background != undefined) {
                    $(this).css({'background': background});
                }
            }).on('touchstart', function(e) { // clear added stlye="" elements..
                $(this).css({'background': '', 'background-color': ''});
            });
}

CSS:

a {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Der schmutzige Weg ... Nicht elegant, aber der einfachste Weg, der dich retten kann.

Entfernen Sie alles, was den Schwebeflug kennzeichnet.

.your-class:hover:before {
  color: blue;
  background: linear-gradient(to bottom, rgba(231,56,39,0) 0%, #aaaaaa 100%);
}

@media all and (min-width:320px) and (max-width: 960px) {
    .your-class:hover:before {
    color: black;
    background: transparent;
  }
}

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.

Probieren Sie diese einfache jquery-Lösung für 2019 aus, obwohl es schon eine Weile her ist.

1. füge dieses Plugin zu head hinzu:

   src = "https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"

2. füge dies zu js hinzu:

   $ ("*"). on ("touchend", Funktion (e) {$ (this) .focus ();}); // gilt für alle Elemente

3. 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

• Platzieren Sie das Plugin vor bootstrap.js, um zu vermeiden, dass Tooltips beeinflusst werden
• Nur auf dem iPhone XR ios 12.1.12 und dem ipad 3 ios 9.3.5 mit Safari oder Chrome getestet.

Verweise:

https://code.jquery.com/ui/

https://api.jquery.com/category/selectors/jquery-selector-extensions/