Bei dem Artikel zu CSS-Transitions ist mir mal wieder aufgefallen, wie selbstverständlich (sprich: altmodisch, da desktop-sozialisiert 🙂 ) man mit der Pseudoklasse :hover umgeht, obwohl doch Benutzer von Endgeräten mit Touchscreens nicht "hovern" können. Da aber irgendwas zwischen 30 und 50% aller Seitenaufrufe im Internet (je nach Quelle, Tendenz: steigend) von Mobilgeräten getätigt werden, ist das ein wenig vermessen – vor allem, wenn man den Anspruch hat, geräte-unabhängige Webseiten zu betreiben… Nun könnte man für Mobilgeräte auf die MouseOver-Pseudoklassen verzichten, oder man versucht, den :hover-Effekt auf Touch Devices zu "übersetzen".

Dafür habe ich ein wenig mit JavaScript und jQuery experimentiert. Die Codes sind sicherlich optimierungswürdig, Bugs und Tipps bitte in die Kommentare. Danke!

Erste Herausforderung ist die Geräteerkennung und die strikte Trennung von Touch- und "Non-Touch"-Device, um je nach Fall eine andere Technik anzuwenden. Also:

1. Zuerst wird (via "ontouchstart") überprüft, ob es sich um ein Touch Device handelt (Quelle). Je nach Ausgang der Prüfung wird einem div mit der id="hashover" eine andere Klasse (".touchHover" vs. ".mouseHover") zugewiesen. Mit diesen Klassen kann dann entsprechend weiter gearbeitet werden:
2.  An die Klasse ".touchHover" werden via ".bind()" (http://api.jquery.com/bind/) die Event Listener "touchstart" und "touchend" zugewiesen und bei entsprechenden Events eine weitere Klasse (".tap") zugewiesen.
3. 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.
    $( "#hashover" ).addClass( "touchHover" );
    // Bei Berührung ('touchstart') und Berührungsende ('touchend') die Klasse '.tap' toggeln.
    $( ".touchHover" ).bind( "touchstart touchend", function(e) {
      $(this).toggleClass( "tap" );
    });
  } else {
    //Wenn kein Touch Device, entspr. Klasse ('.mouseHover') hinzufügen.
    // Der :hover-Effekt funktioniert wie gewohnt via CSS.
    $( "#hashover" ).addClass( "mouseHover" );
  }
});

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

<div id="hashover" class="touchHover">hover / tap!</div>

Wenn der Finger drauf liegt:

<div id="hashover" class="touchHover tap">hover / tap!</div>

und wenn man den Finger wieder herunter nimmt, wird die Klasse ".tap" wieder entfernt.

Auf einem Nicht-Touchscreen heißt das div dagegen

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

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

#hashover {
  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;
}
#hashover.tap,
#hashover: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 "#hashover" 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 beim Laden der Seite kommt…

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