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

140

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?

Simon Ferndriger
quelle
Dies ist ähnlich wie So verhindern Sie klebrige Hover-Effekte für Tasten auf Touch-Geräten - jedoch allgemeiner
Simon Ferndriger
1
Ich komme mit einer PHP-Lösung darum herum, bei der ich herausfinde, ob das Anzeigegerät mobil ist oder nicht, und das richtige Stylesheet mit verschiedenen darauf basierenden Änderungen verwende. Das beantwortet Ihre Frage jedoch nicht. Sie könnten möglicherweise @ media-Abfragen verwenden, aber dies funktioniert auch nicht garantiert, wenn Telefone und Tablets über volle HD-Auflösungen verfügen.
TomFirth
1
Mögliches Duplikat von Hover-Effekten
deaktivieren

Antworten:

169

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/

Klinge
quelle
Danke dir! Nur ein Kommentar: Wäre es nicht besser, zuerst zu überprüfen, ob es document.styleSheetsexistiert, anstatt das zu verwenden try/catch?
Simon Ferndriger
1
Ich habe try/catchnur 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.
Klinge
1
Es ist erwähnenswert, dass Desktop-Browser, einschließlich Firefox, nicht zu "Notouch" führen. Sie berichten über verständnisvolle Berührungsereignisse.
Harry B
3
Diese Lösung funktioniert nicht für gemischte Geräte, bei denen der Schwebeflug für die Maus funktionieren soll, jedoch nicht für Berührungsereignisse
nbar
2
@Haneev es ist für die meisten Fälle korrekt, obwohl nicht für Ihre spezifische. Wenn Ihre Regel funktioniert, wird der Code sehr komplex, was das Verständnis der Antwort erschwert. Ich würde vorschlagen, entweder die Regeln aufzuteilen oder die zweite Lösung zu verwenden, die ohnehin robuster ist. Sie können jedoch gerne eine Bearbeitung vorschlagen, wenn Sie die erste Lösung verbessern können, ohne sie zu kompliziert zu machen.
Klinge
43

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.

Jason T Featheringham
quelle
Danke, das wäre praktisch! Ich habe es jedoch mit Chrome im mobilen Modus ausprobiert, aber es hat nicht funktioniert - als ich darauf "getippt" habe, wurde es trotzdem blau ...
Simon Ferndriger
1
@ SimonFerndriger Das ist nur eine Einschränkung von Chrome Devtools. Versuchen Sie, den Link in einem tatsächlichen Touch-Only-Gerät zu öffnen.
Jason T Featheringham
1
Funktioniert perfekt auf iPad Chrome / Safari im Vergleich zu OS X Chrome / Safari. Vielen Dank! Endlich die elegante Lösung, die Sie für ein so kleines visuelles Problem wünschen.
Rakaloof
3
Ich habe es gerade auf meinem iPhone 6S mit iOS 11 versucht und der Link wurde blau.
Lukas Petr
1
Versuchen Sie dies auch mit Nexus 5X unter Android 8.1.0 und Chrome 68.0.3440.91. Der Link wurde blau.
Trevin Avery
12

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.

ProgrammerPer
quelle
Danke @DmitriPavlutin, laut Tabelle (als es kompiliert wurde) sollte es, aber ich könnte einen anderen Blick darauf werfen.
ProgrammerPer
@DmitriPavlutin Du bist in der Tat richtig. Wird die Antwort aktualisieren
ProgrammerPer
1
Sie meinen, dass es auf Firefox Desktop nicht funktioniert, wenn es mit einem exklusiven Touch-Gerät verwendet wird? Es funktioniert großartig mit allem, was ich versucht habe.
FuzzeeLowgeek
@ FuzzeeLowgeek Hört sich gut an! Das letzte Mal, als ich nachgesehen habe, war der 23.08.2018. Wenn Sie dies also sicher bestätigen können, kann ich die Antwort möglicherweise erneut aktualisieren.
ProgrammerPer
8

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;
    }
}
Calsal
quelle
das funktioniert überhaupt nicht. Sie haben Hover: Keine in der Medienabfrage für ein Hover-unterstütztes Mixin? Sie brauchen Zeiger: grob wie in der anderen Antwort hier.
Allan Nienhuis
Hast du es überhaupt versucht oder sagst du nur, dass es nicht funktioniert, weil es komisch aussieht? Deshalb habe ich "Es sieht komisch aus" geschrieben. Und es funktioniert für mich ohne Zeiger: grob.
Calsal
Ich hatte einige inkonsistente Ergebnisse mit dem CSS-Ansatz auf meinem OnePlus 5T (sowohl in Chrome als auch in Firefix). Dies funktionierte gut unter iOS, aber ich konnte es nicht dazu bringen, auf OnePlus zu funktionieren. Ich habe gründlich mit dem Any-Pointer und Any-Hover
Zeth
6

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.

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

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

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

Selten needy
quelle
pointer-events- das ist erstaunlich! Genau das habe ich gesucht, vielen Dank!
Simon Ferndriger
1
@ SimonFerndriger Nun, ich hoffe, dass es in Zukunft hilfreich ist. Beachten Sie die bisherige Einschränkung,<a> Links bisher möglicherweise nicht zugegriffen werden kann pointer-events:none. Mit etwas Glück wird sich das später ändern - oder CSS 3.x oder 4.0+ wird pointer-events:navigation-onlyoder ähnliches haben.
Selten needy
6

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

Marouen Mhiri
quelle
Dies würde das Problem tatsächlich lösen. Ich habe noch nie davon gehört. In welcher Browserversion soll das funktionieren?
Simon Ferndriger
3
@ SimonFerndriger caniuse.com/#feat=css-media-interaction und einige weitere Informationen: dev.opera.com/articles/media-features
Skeptic
Gut ... Es hat keine breite Browser-Unterstützung.
Giacomo Paita
Das ist cool! Vielen Dank für diese bequeme Lösung. Ich hoffe, dass es zu den W3C-Standards hinzugefügt wird.
GProst
Ich bin froh, dass ich helfen konnte ^^
Marouen Mhiri
5

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;
}
Giacomo Paita
quelle
Dies wurde auch von @blade vorgeschlagen. Wenn Sie jedoch das htmlTag anstelle des bodyTags verwenden, ist das Lesen möglicherweise etwas besser. Das ist eigentlich die Lösung, die ich derzeit verwende. Trotzdem danke.
Simon Ferndriger
1

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");
                    }
                }
            }
        }
    }
}
Mineroot
quelle
1

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.

mr.mii
quelle
0

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");
});
lars at upstruct
quelle
1
Ein Problem ist eigentlich, dass es sich auch um eine .mousemove () handelt, wenn Sie auf Touch-Geräten auf etwas klicken.
Lars am 13.
1
Und Sie werden dieses Ereignis wahrscheinlich ohne Unterbrechung auslösen, wodurch sich dies auf die Leistung auswirkt. Wenn dies funktionieren würde, sollten Sie es besser verwenden$('body').one.('mousemove', ...)
Simon Ferndriger
0

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;
}
HU TanKy
quelle
0

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;
  }
}
Fellipe Sanches
quelle
0

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.

kunal Sharma
quelle
-1

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/

Darren
quelle
2
Im Jahr 2019 sollten Sie jQuery nicht mehr benötigen - das WebAPI ist ziemlich leistungsfähig und unterstützt alle wichtigen Funktionen.
Acme
Ya ... jQuery im Jahr 2019? Wie wäre es mit Flash? Hehehe.
medic.io