:hover-Effekte für Touchscreens

Bei dem Artikel zu CSS-Transitions ist mir mal wieder aufgefallen, wie selbstverständlich man mit der Pseudoklasse :hover umgeht, obwohl doch Benutzer von Endgeräten mit Touchscreens nicht „hovern“ können. Um das zu umgehen, habe ich ein wenig mit JavaScript und jQuery experimentiert. Die Codes sind sicherlich optimierungswürdig, Bugs und Tipps bitte in die Kommentare. Danke!

Im oben zitierten Artikel wende ich die hier beschriebene Variante übrigens nicht an, sondern nur eine „Kurzversion“ ohne vorherigen Device Check. Daher kann es dort zu dem Effekt kommen, dass auf Touchscreens zwar eine Berührung die entsprechende Animation auslöst, diese aber nicht wieder rückgängig gemacht wird (was dem „mouse-out“ eines „hovers“ entspräche).

Im vorliegenden Fall versuche ich, eine strikte Trennung von Touch- und „Non-Touch“-Device und je nach Fall eine andere Technik anzuwenden. Also:

Zuerst wird (via „ontouchstart“) überprüft, ob es sich um ein Touch Device handelt. Je nach Ausgang der Prüfung wird dem div eine andere Klasse („touchHover“ vs. „mouseHover“) zugewiesen. Mit diesen Klassen kann dann entsprechend weiter gearbeitet werden:

  1.  An die Klasse „touchHover“ werden via „bind()“ die Event Listener „touchstart“ und „touchend“ zugewiesen und bei entsprechenden Events eine weitere Klasse („tapHover“) zugewiesen.
  2. Die Klasse „mouseHover“ wird einfach via CSS mit der Preudoklasse „:hover“ versehen.
$(document).ready(function(){
   //Prüfung ob Touchscreen oder nicht
   function isTouchDevice() {
      return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
   }

   // Wenn es sich um ein Touch Device handelt,
   if (isTouchDevice() === true) {
      // entspr. Klasse ('.touchHover') zum div hinzufügen.
      $( "#hover" ).addClass( "touchHover" );
      // Bei Berührung ('touchstart') und Berührungsende ('touchend') die Klasse '.tapHover' toggeln.
      $( ".touchHover" ).bind( "touchstart touchend", function(e) {
         $(this).toggleClass( "tapHover" );
      });
   } else {
      //Wenn kein Touch Device, entspr. Klasse ('.mouseHover') hinzufügen.
      // Der :hover-Effekt funktioniert wie gewohnt via CSS.
      $( "#hover" ).addClass( "mouseHover" );
   }
});

Heißt: Auf einem Touchscreen sieht das div nun so aus:

<div id="hover" class="touchHover">hover me!</div>

Wenn der Finger drauf liegt:

<div id="hover" class="touchHover tapHover">hover me!</div>

und wenn man den Finger wieder herunter nimmt, wird die Klasse „.tapHover“ wieder entfernt. Auf einem Nicht-Touchscreen heißt das div dagegen

<div id="hover" class="mouseHover">hover me!</div>

und kann einfach mit mouseHover:hover via CSS manipuliert werden. Das entsprechende CSS sieht so aus:

#hover {
   background-color: #005566;
   color: #f89114;
   font-weight: bold;
   padding: 15px;
   text-align: center;
   width: 150px;
   -webkit-transition: all 1s ease 0s;
   -moz-transition: all 1s ease 0s;
   -o-transition: all 1s ease 0s;
   transition: all 1s ease 0s;
}
#hover.tapHover, #hover.mouseHover:hover {
   background-color: #f89114;
   color: #005566;
   width: -webkit-calc(100% - 30px);
   width: -moz-calc(100% - 30px);
   width: calc(100% - 30px);
}

Warum ich die Basis-CSS-Definition der ID „#hover“ und nicht den Klassen „.touchHover, .mouseHover“ zuweise? Weil ansonsten die CSS-Transitions bereits beim Seitenaufbau bei der Zuweisung der Klassen nach dem Device-Check ausgeführt würden und es zu ungewollten Bewegungen auf der Seite kommt.

Die HTML-Dateien enthält den gesamten HTML-, JavaScript- und CSS-Code. Einfach speichern und experimentieren 🙂 Ausprobieren, Herunterladen?

:hoverOnTouchDevice-Demo


Nachtrag: Nach dem Lesen des Artikels erscheinen mir die vergebenen Klassennamen irgendwie überhaupt nicht mehr so pfiffig :-/ Egal. Jetzt bleibt es erst einmal so…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.