Deaktivieren Sie Hover-Effekte in mobilen Browsern

Ich nehme an Ihrer Frage, dass Ihr Hover-Effekt den Inhalt Ihrer Seite ändert. In diesem Fall ist mein Rat:

• Hover-Effekte für touchstart und mouseenter hinzufügen.
• Hover-Effekte von mouseleave, touchmove und click entfernen.

Alternativ können Sie Ihre Seite so bearbeiten, dass keine Inhaltsänderung erfolgt.

Hintergrund

Um eine Maus zu simulieren, lösen Browser wie Webkit mobile die folgenden Ereignisse aus, wenn ein Benutzer einen Finger auf dem Touchscreen (z. B. iPad) berührt und freigibt (Quelle: Touch And Mouse auf html5rocks.com):

1. touchstart
2. touchmove
3. touchend
4. 300ms Verzögerung, wenn der Browser sicherstellt, dass es sich um ein einfaches Tippen handelt, nicht um ein doppeltes Tippen
5. mouseover
6. mouseenter
   • Note: Wenn ein mouseover-, mouseenter- oder mousemove-Ereignis den Seiteninhalt ändert, werden die folgenden Ereignisse niemals ausgelöst.
7. mousemove
8. mousedown
9. mouseup
10. click

Dem Webbrowser scheint es nicht möglich zu sein, die Mausereignisse zu überspringen.

Was noch schlimmer ist: Wenn ein Mouseover-Ereignis den Seiteninhalt ändert, wird das Klickereignis nie ausgelöst, wie im Safari Web Content Guide - Umgang mit Ereignissen erläutert, insbesondere Abbildung 6.4 in One-Finger-Ereignisse. Was genau eine "Inhaltsänderung" ist, hängt von Browser und Version ab. Ich habe festgestellt, dass für iOS 7.0 eine Änderung der Hintergrundfarbe keine (oder nicht mehr?) Inhaltsänderung ist.

Lösung erklärt

Um es zusammenzufassen:

• Fügen Sie Hover-Effekte für touchstart und mouseenter hinzu.
• Entfernen Sie die Hover-Effekte auf mouseleave, touchmove und click.

Beachten Sie, dass es keine Aktion für touchend gibt!

Dies funktioniert eindeutig bei Mausereignissen: mouseenter und mouseleave (leicht verbesserte Versionen von mouseover und mouseout) werden ausgelöst und fügen den Hover hinzu und entfernen ihn.

Wenn der Benutzer tatsächlich clicks ein Link ist, wird der Hover-Effekt ebenfalls entfernt. Dies stellt sicher, dass es entfernt wird, wenn der Benutzer die Zurück-Schaltfläche im Webbrowser drückt.

Dies funktioniert auch für Touch-Events: Beim Touchstart wird der Hover-Effekt hinzugefügt. Es wird nicht am Touchend entfernt. Es wird erneut in mouseenter hinzugefügt, und da dies keine Inhaltsänderungen verursacht (es wurde bereits hinzugefügt), wird auch das click-Ereignis ausgelöst, und der Link wird verfolgt, ohne dass der Benutzer erneut klicken muss!

Die 300-ms-Verzögerung, die ein Browser zwischen einem touchstart-Ereignis und click hat, wird tatsächlich gut genutzt, da der Hover-Effekt während dieser kurzen Zeit angezeigt wird.

Wenn der Benutzer den Klick abbrechen möchte, wird der Finger wie gewohnt bewegt. Normalerweise ist dies ein Problem, da kein mouseleave-Ereignis ausgelöst wird und der Hover-Effekt bestehen bleibt. Glücklicherweise kann dies leicht behoben werden, indem der Hover-Effekt von touchmove entfernt wird.

Das ist es!

Beachten Sie, dass es möglich ist, die Verzögerung von 300 ms zu entfernen, z. B. mithilfe der FastClick-Bibliothek . Dies ist jedoch für diese Frage nicht geeignet.

Alternativlösungen

Ich habe die folgenden Probleme mit den folgenden Alternativen gefunden:

• Browsererkennung: Extrem fehleranfällig. Es wird davon ausgegangen, dass ein Gerät entweder über eine Maus oder über eine Berührung verfügt, während eine Kombination aus beidem immer häufiger wird, wenn sich die Touch-Displays vergrößern.
• CSS-Medienerkennung: Die einzige CSS-Lösung, die mir bekannt ist. Immer noch fehleranfällig und geht immer noch davon aus, dass ein Gerät entweder Maus oder Berührung hat, während beides möglich ist.
• Das Klickereignis in touchend emulieren: Dies folgt falsch dem Link, auch wenn der Benutzer nur scrollen oder zoomen wollte, ohne dass er auf den Link klicken wollte.
• Verwenden Sie eine Variable, um Mausereignisse zu unterdrücken: Hiermit wird eine Variable in touchend festgelegt, die in nachfolgenden Mausereignissen als if-Bedingung verwendet wird, um Statusänderungen zu diesem Zeitpunkt zu verhindern. Die Variable wird im Klickereignis zurückgesetzt. Siehe die Antwort von Walter Roman auf dieser Seite. Dies ist eine anständige Lösung, wenn Sie wirklich keinen Hover-Effekt auf Touch-Oberflächen haben möchten. Dies funktioniert leider nicht, wenn touchend aus einem anderen Grund ausgelöst wird und kein Klickereignis ausgelöst wird (z. B. der Benutzer hat gescrollt oder gezoomt) und anschließend versucht, der Verknüpfung mit einer Maus zu folgen (z. B. auf einem Gerät sowohl mit Maus als auch mit Berührung) Schnittstelle).

Lesen Sie weiter

• http://jsfiddle.net/macfreek/24Z5M/ . Testen Sie die oben genannte Lösung in dieser Sandbox.
• http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser . Dieselbe Antwort mit etwas mehr Hintergrund.
• https://www.html5rocks.com/de/mobile/touchandmouse/ . Toller Hintergrundartikel auf html5rocks.com über Touch und Maus im Allgemeinen.
• https://developer.Apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html . Safari Web Content Guide - Umgang mit Ereignissen. Siehe insbesondere Abbildung 6.4, in der erläutert wird, dass nach einer Inhaltsänderung während eines mouseover- oder mousemove-Ereignisses keine weiteren Ereignisse ausgelöst werden.

Wie kann ich die Hover-Effekte erzielen, wenn ich die Maus benutze, sie aber unterdrücken, wenn ich den Touchscreen benutze?

Vielleicht denken Sie nicht so sehr daran, Hover-Effekte für Touchscreens zu unterdrücken, sondern Hover-Effekte für Mausereignisse hinzuzufügen.

Wenn Sie die :hover-Effekte in Ihrem CSS beibehalten möchten, können Sie verschiedene Stile für verschiedene Medien angeben:

@media screen { /* hover styles here */ } 

@media handheld { /* non-hover styles here */ }

Leider gibt es viele mobile Geräte, die dies ignorieren und nur die Bildschirmregeln verwenden. Glücklicherweise unterstützen viele neuere Mobil-/Tablet-Browser einige ausgefallenere Medienanfragen:

@media screen and (max-width:800px) { /* non-hover styles here */ }

Selbst wenn der "screen" - oder "handheld" -Teil ignoriert wird, wird die "max-width" den Trick für Sie tun. Sie können einfach davon ausgehen, dass alles mit einem Bildschirm, der kleiner als 800 Pixel ist, ein Tablet oder Telefon sein und keine Hover-Effekte verwenden muss. Für die seltenen Benutzer, die eine Maus mit einem Gerät mit niedriger Auflösung verwenden, sehen sie keine Hover-Effekte, ansonsten wäre Ihre Website jedoch in Ordnung.

Weitere Informationen zu Medienfragen Es gibt viele Artikel dazu online - hier ist einer: http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

Wenn Sie die Hover-Effekte aus Ihrem CSS heraus verschieben und mit JavaScript anwenden, können Sie spezifisch an Mausereignisse binden, und/oder Sie können wieder nur Annahmen treffen, die auf der Bildschirmgröße basieren, wobei das "problem" im schlimmsten Fall das ist Benutzer, die eine Maus verwenden, verpassen die Hover-Effekte.

Ich habe die folgende JS für ein kürzlich erstelltes Projekt geschrieben, eine Desktop-/Mobile-/Tablet-Site mit Hover-Effekten, die bei Berührung nicht auftreten sollte.

Das mobileNoHoverState-Modul unten hat eine Variable preventMouseover (ursprünglich als false deklariert), die auf true gesetzt ist, wenn ein Benutzer das touchstart-Ereignis für ein Element $target auslöst. 

preventMouseover wird dann auf false zurückgesetzt, wenn das mouseover-Ereignis ausgelöst wird. Dadurch kann die Site wie beabsichtigt arbeiten, wenn ein Benutzer sowohl den Touchscreen als auch die Maus verwendet.

Wir wissen, dass mouseover nach touchstart aufgrund der Reihenfolge ausgelöst wird, in der sie in init deklariert werden.

var mobileNoHoverState = function() {

    var hoverClass = 'hover',
        $target = $(".foo"), 
        preventMouseover = false;

    function forTouchstart() {
        preventMouseover = true;
    }

    function forMouseover() {
        if (preventMouseover === false) {
            $(this).addClass(hoverClass);
        } else {
            preventMouseover = false;
        }
    }

    function forMouseout() {
        $(this).removeClass(hoverClass);
    }

    function init() {
        $target.on({
            touchstart  : forTouchstart,
            mouseover   : forMouseover,
            mouseout    : forMouseout
        });                
    }

    return {
        init: init
    };
}();

Das Modul wird dann weiter instanziiert:

mobileNoHoverState.init();

Ich wollte wirklich eine reine css-Lösung für mich selbst, da das Besprühen einer gewichtigen Javascript-Lösung um all meine Ansichten wie eine unangenehme Option schien. Schließlich fand die @ media.hover -Abfrage, die "feststellen kann, ob der primäre Eingabemechanismus dem Benutzer erlaubt, über Elemente zu schweben". Dies vermeidet Berührungsgeräte, bei denen "Schweben" eher eine emulierte Aktion ist als eine direkte Fähigkeit des Eingabegeräts.

Wenn ich zum Beispiel einen Link habe:

<a href="/" class="link">Home</a>

Dann kann ich es sicher nur zu :hover formatieren, wenn das Gerät es einfach mit dieser css unterstützt:

@media (hover: hover) {
  .link:hover { /* hover styles */ }
}

Während die meisten modernen Browser Interaktionsmedienfunktionsabfragen unterstützen, ist es bei einigen gängigen Browsern wie IE und Firefox nicht der Fall. In meinem Fall funktioniert das gut, da ich nur Chrome als Desktop und Chrome und Safari für Handys unterstützen wollte. 

Meine Lösung ist das Hinzufügen der hoveraktiven CSS-Klasse zum HTML-Tag Und verwenden Sie diese am Anfang aller CSS-Selektoren mit: hover Und entfernen Sie diese Klasse beim ersten Touchstart-Ereignis.

http://codepen.io/Bnaya/pen/EoJlb

JS:

(function () {
    'use strict';

    if (!('addEventListener' in window)) {
        return;
    }

    var htmlElement = document.querySelector('html');

    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');

        htmlElement.removeEventListener('touchstart', touchStart);
    }

    htmlElement.addEventListener('touchstart', touchStart);
}());

HTML:

<html class="hover-active">

CSS:

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}

Was ich getan habe, um das gleiche Problem zu lösen, ist eine Feature-Erkennung (ich verwende etwas wie diesen Code ), um festzustellen, ob onTouchMove definiert ist. sonst füge ich "desktopMode" hinzu.

Jedes Mal, wenn ein Style-Effekt nur für ein Touchgerät oder nur für einen Desktop gilt, wird der CSS-Regel die entsprechende Klasse vorangestellt:

.desktopMode .someClass:hover{ color: red }
.touchMode .mainDiv { width: 100%; margin: 0; /*etc.*/ }

Edit: Diese Strategie fügt Ihrer CSS natürlich ein paar zusätzliche Zeichen hinzu. Wenn Sie sich also Sorgen über die Größe der CSS machen, können Sie nach den Definitionen für touchMode und desktopMode suchen und diese in verschiedenen Dateien ablegen, um sie optimal zu bedienen css für jeden Gerätetyp; oder Sie könnten die Klassennamen in etwas kürzere ändern, bevor Sie zum Prod gehen.

In meinem Projekt haben wir dieses Problem mit Hilfe von https://www.npmjs.com/package/postcss-hover-prefix und https://modernizr.com/ .__ gelöst. Zuerst werden wir nachbearbeiten Ausgabe von CSS-Dateien mit postcss-hover-prefix. Es fügt .no-touch für alle css hover-Regeln hinzu.

const fs = require("fs");
const postcss = require("postcss");
const hoverPrfx = require("postcss-hover-prefix");

var css = fs.readFileSync(cssFileName, "utf8").toString();
postcss()
   .use(hoverPrfx("no-touch"))
   .process(css)
   .then((result) => {
      fs.writeFileSync(cssFileName, result);
   });

css

a.text-primary:hover {
  color: #62686d;
}

wird

.no-touch a.text-primary:hover {
  color: #62686d;
}

Zur Laufzeit fügt Modernizr dem html-Tag automatisch css-Klassen hinzu

<html class="wpfe-full-height js flexbox flexboxlegacy canvas canvastext webgl 
  no-touch 
  geolocation postmessage websqldatabase indexeddb hashchange
  history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage
  borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients
  cssreflections csstransforms csstransforms3d csstransitions fontface
  generatedcontent video audio localstorage sessionstorage webworkers
  applicationcache svg inlinesvg smil svgclippaths websocketsbinary">

Diese Nachbearbeitung von css plus Modernizr deaktiviert den Hover für Touch-Geräte und ermöglicht andere. In der Tat wurde dieser Ansatz von Bootstrap 4 inspiriert, wie sie dasselbe Problem lösen: https://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#sticky-hoverfocus-on-mobile

Sie können das Ereignis mouseLeave auslösen, wenn Sie ein Element auf dem Touchscreen berühren. Hier ist eine Lösung für alle <a>-Tags:

function removeHover() {
    var anchors = document.getElementsByTagName('a');
    for(i=0; i<anchors.length; i++) {
        anchors[i].addEventListener('touchstart', function(e){
            $('a').mouseleave();
        }, false);
    }
}

Ich hatte zwar ein ähnliches Problem, konnte es jedoch mit Medienabfragen und einfachem CSS beheben. Ich bin mir sicher, dass ich hier gegen einige Regeln verstoße, aber es funktioniert für mich.

Ich musste im Grunde eine massive Bewerbung von jemandem machen und darauf reagieren. Sie benutzten jQueryUI und baten mich, ihre jQuery nicht zu manipulieren, daher war ich auf die Verwendung von CSS beschränkt.

Wenn ich im Touchscreen-Modus eine der Tasten drückte, wurde der Hover-Effekt für eine Sekunde ausgelöst, bevor die Aktion der Schaltfläche wirksam wurde. So habe ich es behoben.

@media only screen and (max-width:1024px) {

       #buttonOne{
            height: 44px;
        }


        #buttonOne:hover{
            display:none;
        }
}   

Iv hatte 2 Lösungen für das Problem gefunden, was implizierte, dass Sie eine Berührung mit modernizr oder etwas anderem erkennen und eine Touch-Klasse für das HTML-Element festlegen.

Das ist gut, aber nicht unterstützt sehr gut:

html.touch *:hover {
    all:unset!important;
}

Aber das hat eine sehr gute Unterstützung:

html.touch *:hover {
    pointer-events: none !important;
}

Funktioniert einwandfrei für mich, es bewirkt, dass alle Hover-Effekte so aussehen, als wenn Sie eine Schaltfläche berühren, die aufleuchtet, aber nicht als fehlerhafter Hover-Effekt für Mausereignisse endet.

Ich finde, dass modernizr den besten Job gemacht hat:

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js </ strike>

EDIT

Ich habe eine bessere und einfachere Lösung für dieses Problem gefunden

So stellen Sie fest, ob der Client ein Touch-Gerät ist

Fügen Sie Modernizr auf Ihrer Seite ein und setzen Sie stattdessen Ihre Hover-Zustände:

html.no-touchevents .box:hover {
    background: blue;
}

Hier ist meine Lösung: http://jsfiddle.net/agamemnus/g56aw709/-- code unten.

Alles, was Sie tun müssen, ist, ihr ": hover" in ".hover" umzuwandeln ... das ist es! Der große Unterschied zwischen diesem und dem Rest ist, dass dies auch für nicht-singuläre Element-Selektoren wie .my_class > *:hover { funktioniert.

handle_css_hover_effects ()

function handle_css_hover_effects (init) {
 var init = init || {}
 var handle_touch_events = init.handle_touch_events || true
 var handle_mouse_events = init.handle_mouse_events || true
 var hover_class         = init.hover_class         || "hover"
 var delay_preferences   = init.delay_preferences   || {touch: {add: 500, remove: 500}}
 function default_handler (curobj, input_type, op) {
  var hovered_element_selector = "*" + ((op == "add") ? ":" : ("." + hover_class))
  var hovered_elements = Array.prototype.slice.call(document.body.querySelectorAll(hovered_element_selector))
  var modified_list = []
  while (true) {
   if ((curobj == null) || (curobj == document.documentElement)) break
   if (hovered_elements.indexOf(curobj) != -1) modified_list.Push (curobj)
   curobj = curobj.parentNode
  }
  function do_hover_change () {modified_list.forEach (function (curobj) {curobj.classList[op](hover_class)})}
  if ((!delay_preferences[input_type]) || (!delay_preferences[input_type][op])) {
   do_hover_change ()
  } else {
   setTimeout (do_hover_change, delay_preferences[input_type][op])
  }
 }

 if (handle_mouse_events) {
  document.body.addEventListener ('mouseover' , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "add")})
  document.body.addEventListener ('mouseout'  , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "remove")})
  document.body.addEventListener ('click'     , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "remove")})
 }

 if (handle_touch_events) {
  document.body.addEventListener ('touchstart', function (evt) {var curobj = evt.target; default_handler (curobj, "touch", "add")})
  document.body.addEventListener ('touchend'  , function (evt) {var curobj = evt.target; default_handler (curobj, "touch", "remove")})
  document.body.addEventListener ('touchmove',  function (evt) {
   var curobj = evt.target
   var hovered_elements = Array.prototype.slice.call(document.body.querySelectorAll("*:hover"))
   var lastobj = null
   evt = evt.changedTouches[0]
   var elements_at_point = get_elements_at_point (evt.pageX, evt.pageY)
   // Get the last element that isn't at the current point but is still hovered over, and remove only its hover attribute.
   while (true) {
    if ((curobj == null) || (curobj == document.documentElement)) break
    if ((hovered_elements.indexOf(curobj) != -1) && (elements_at_point.indexOf(curobj) == -1)) lastobj = curobj
    curobj = curobj.parentNode
   }
   if (lastobj == null) return
   if ((!delay_preferences.touch) || (!delay_preferences.touch.remove)) {
    lastobj.classList.remove(hover_class)
   } else {
    setTimeout (function () {lastobj.classList.remove(hover_class)}, delay_preferences.touch.remove)
   }

   function get_elements_at_point (x, y) {
    var el_list = [], pe_list = []
    while (true) {
     var curobj = document.elementFromPoint(x, y)
     if ((curobj == null) || (curobj == document.documentElement)) break
     el_list.Push (curobj); pe_list.Push (curobj.style.pointerEvents)
     curobj.style.pointerEvents = "none"
    }
    el_list.forEach (function (current_element, i) {current_element.style.pointerEvents = pe_list[i]})
    return el_list
   }
  })
 }
}

Es könnte hilfreich sein, Ihr CSS zu sehen, da es sich nach einem ziemlich seltsamen Thema anhört. Aber wenn es passiert und alles andere gut ist, könnten Sie versuchen, den Hover-Effekt auf Javascript zu verschieben (Sie könnten auch jquery verwenden) . Binden Sie einfach den Mouseover oder besser ein mouseenter-Ereignis ein und beleuchten Sie Ihr Element wenn das Ereignis ausgelöst wird.

Schauen Sie sich das letzte Beispiel hier an: http://api.jquery.com/mouseover/ , Sie könnten etwas Ähnliches verwenden, um sich zu protokollieren, wenn das Ereignis ausgelöst wird, und es von dort zu nehmen!

In einem Projekt, das ich kürzlich durchgeführt habe, habe ich dieses Problem mit der Funktion für delegierte Ereignisse von jQuery gelöst. Sie sucht mithilfe eines jQuery-Selektors nach bestimmten Elementen und fügt diesen Elementen eine CSS-Klasse hinzu bzw. entfernt sie, wenn sich der Mauszeiger über dem Element befindet. Es scheint gut zu funktionieren, soweit ich es testen konnte, einschließlich IE10 auf einem touchfähigen Notebook mit Windows 8.

$(document).ready(
    function()
    {
        // insert your own selector here: maybe '.hoverable'?
        var selector = 'button, .hotspot';

        $('body')
            .on('mouseover', selector, function(){ $(this).addClass('mouseover');    })
            .on('mouseout',  selector, function(){ $(this).removeClass('mouseover'); })
            .on('click',     selector, function(){ $(this).removeClass('mouseover'); });
    }
);

edit: Diese Lösung erfordert natürlich, dass Sie Ihr CSS so ändern, dass die ": hover" - Selektoren entfernt werden, und darüber nachdenken, welche Elemente "schwebbar" sein sollen.

Wenn Sie sehr viele Elemente auf Ihrer Seite haben (z. B. mehrere Tausend), kann dies jedoch ein wenig langsam werden, da diese Lösung Ereignisse von drei Typen auf all Elementen auf der Seite abfängt und dann die Auswahl trifft Streichhölzer. Ich habe die CSS-Klasse "mouseover" anstelle von "hover" genannt, weil ich wollte, dass kein CSS-Leser ": hover" liest, wo ich ".hover" schrieb.

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", function(e) { $(this).focus(); }); //applies to all elements

3. einige vorgeschlagene Variationen dazu sind:

   $(":input, :checkbox,").on("touchend", function(e) {(this).focus);}); //specify elements
   
   $("*").on("click, touchend", function(e) { $(this).focus(); });  //include click event`
   
   css: body { cursor: pointer; } //touch anywhere to end a focus`
   

Anmerkungen

• platzieren Sie das Plugin ggf. vor bootstrap.js, um Auswirkungen auf die QuickInfos zu vermeiden
• nur auf iPhone XR ios 12.1.12 und 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/

Hallo Person aus der Zukunft, Sie möchten wahrscheinlich die Medienabfrage pointer und/oder hover verwenden. Die Medienabfrage handheld wurde nicht mehr unterstützt.

/* device is using a mouse or similar */
@media (pointer: fine) {
  a:hover {
    background: red;
  }
}

Wenn Sie gerne JavaScript verwenden, können Sie Modernizr in Ihrer Seite verwenden. Wenn die Seite geladen wird, wird einem Browser ohne Touchscreen die Klasse '.no-touch' zum html-Tag hinzugefügt. Bei einem Touchscreen-Browser wird dem html-Tag die Klasse '.touch' zum html-Tag hinzugefügt . 

Dann müssen Sie lediglich prüfen, ob das HTML-Tag die No-Touch-Klasse hat, bevor Sie sich entscheiden, Ihre Mouseenter- und Mouseleave-Listener hinzuzufügen.

if($('html').hasClass('no-touch')){
    $('.box').on("mouseenter", function(event){
            $(this).css('background-color','#0000ff')
    });
    $('.box').on("mouseleave", function(event){
            $(this).css('background-color','')
    });
}

Bei einem Touchscreen-Gerät haben die Ereignisse keine Listener, sodass Sie beim Tippen keinen Hover-Effekt erhalten.