CSS :hover für Transitions 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;
}