CSS :hover für Transitions vs Touch

CSS hover vs touch

Rund drei Jahrzehnte lang konnten wir uns auf die Maus verlassen und die Reaktion auf ein : hover gehörte zu den intuitivsten Merkmalen der Benutzeroberflächen einer Webseite.

:hover realisiert einfache Effekte, stößt CSS Transitions an und schaltet komplexe Animationen.

Javascript Touch zur Emulation von CSS :hover

Es wäre viel zu schade, auf Mausklicks umzusteigen und auf das natürliche Hovern zu verzichten. Ein CSS :touch gibt es leider nicht, also muss Javascript das Hovern mit der Maus nachahmen.

touch me
HTML für die Box
<div class="box-1">
   <div class="boxheader">touch me</div>
   <div class="hover-button">
      <span class="btn"></span>
      <span class="btn"></span>
      <span class="btn"></span>
   </div>
</div>
CSS für den :hover-Effekt
.box .btn {
  opacity: 0;
}

.box:hover .hover-button {
	height: 150px;
	width: 400px;
	margin-top: -80px;
	border-color: seashell;
	background-color: seashell;
	transform: translateX(-200px);
}

.box:hover .btn {
	opacity: 1;
}
.box:hover .btn:nth-child(1) {
	transition: 0.4s;
	transition-delay: 0.7s;
}
.box:hover .btn:nth-child(2) {
	transition: 0.4s;
	transition-delay: 1.0s;
}
.box:hover .btn:nth-child(3) {
	transition: 0.4s;
	transition-delay: 1.3s;
}

Hover mit Javascript und touchstart-Event

Die einfachste Technik zum Nachziehen von hover für Touchscreens ist ein Javascript, das eine zusätzliche CSS-Klasse für die animierten Elemente beim ersten Touch hinzufügt und beim nächsten Touch wieder entfernt – toggelt.

Javascript touchstart statt hover
<script>
document.querySelector(".box").ontouchstart = function (e) {
	document.querySelector(".box .hover-button").classList.toggle("touch-button");
}
</script>

Damit allein ist es aber nicht getan. Touch Screens bekommen mit, dass der Benutzer auf ein Element berührt – den Touch. Sie setzen darauf hin fast immer auch die Anfangsaktion eines Hoverns aus, aber oft frieren die hover-Regeln ein. Dieses Verhalten von Touch-Screens wird als sticky :hover bezeichnet.

Darum wird das hover-Event auf Geräte beschränkt, die :hover direkt unterstützen.

Zusätzlich müssen die Eigenschaften beim Hovern für Touchscreens mit der Klasse touch-button aufgeführt werden.

.box .touch-button {
	height: 150px;
	width: 400px;
	margin-top: -80px;
	border-color: seashell;
	background-color: seashell;
	transform: translateX(-200px);
}

.box .touch-button .btn {
	opacity: 1;
}

.box .touch-button .btn:nth-child(1) {
	transition: 0.6s;
	transition-delay: 0.9s;
}

.box .touch-button .btn:nth-child(2) {
	transition: 0.6s;
	transition-delay: 1.2s;
}

.box .touch-button .btn:nth-child(3) {
	transition: 0.6s;
	transition-delay: 1.5s;
}

Touch Down fürs Scrollen

Am Ende kann das Abfangen eines Touch mit Javascript auch noch das Scrollen außer Kraft setzen. Wird ontouchstart z.B. zum kurzfristigen Anhalten einer Slideshow eingesetzt, muss das angeborene Verhalten des Touchscreens unterbunden werden.

slider.ontouch = function (evt) {
	evt.preventDefault();
	evt.stopPropagation();
	slider.style.animationPlayState = "paused";
	document.querySelector(".progress-bar").style.animationPlayState = "paused";
}

evt.preventDefault stoppt aber nicht nur die Slideshow kurzfristig, sondern unterbindet das Scrollen. Wenn nicht ausreichend Platz unter der Slideshow vorhanden ist, auf dem der Benutzer das Scrollen wieder aufnehmen kann, muss ihm eine Alternative vorgesetzt werden.

Das sehen wir in vielen Slideshows als Maussymbol am Ende des Slideshow – aber während die Maus eigentlich immerzu über die Seite hovert, berührt der Finger den Touchscreen fast nur zum Scrollen und viele Benutzer kennen Touch-Elemente nicht ohne Weiteres.