CSS :hover vs Touch

Javascript Touch zur Emulation von CSS :hover

:hover realisiert einfache Effekte, stößt CSS Transitions an und schaltet komplexe Animationen. Wer kümmert sich um Touchscreens?

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

<div class="bbox">
   <div class="boxheader">touch me</div>
   <div class="hbtn">
      <span class="btn"></span>
      <span class="btn"></span>
      <span class="btn"></span>
   </div>
</div>

.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;
}

Eine einfache Media Query stellt fest, ob das Gerät Hovern unterstützt – ein »Pointer Device« ist. Dafür werden keine umfangreichen und wenig zuverlässigen Javascript-Libraries gebraucht.

@media (hover: hover) {
	body {
		color: darkslategray;
	}
}

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.

<script>
document.querySelector(".bbox").ontouchstart = 
	() => document.querySelector(".hbtn").classList.toggle("touchbtn");
</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 touchbtn aufgeführt werden.

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

.box .touchbtn .btn {
	opacity: 1;
}

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

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

.box .touchbtn .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.