Der Hover-Effekt funktioniert auf Geräten ohne Touchscreens einwandfrei. Mit einer Maus oder einem Touchpad-Peiger entsteht ein Hover-Effekt, wie hier am Beispiel des Hover über dem Teilen-Button zu sehen:
Bei Laptops mit Touchscreen sowie Maus/Touchpad bin ich mir jedoch nicht sicher, ob es eine Möglichkeit gibt, zu erkennen, ob die Maus ab- oder eingesteckt ist.
Ich weiß nicht, ob sich dies über die CSS4-Media-Abfrage beheben lässt:
Es wäre jedoch wünschenswert, dies für Geräte zu beheben, die sowohl als Touchscreen- als auch als Maus-Gerät erkannt werden – um ihnen den Hover-Effekt zu ermöglichen. Nutzer greifen bereits darauf zurück, den Touchscreen ihres Laptops zu deaktivieren, damit es funktioniert, wahrscheinlich, weil sie den Touchscreen ohnehin nie nutzen.
Ich habe dies getestet: https://jsfiddle.net/davidThomas/q29r4pjs/3/ und erhielt folgende Ergebnisse:
- Desktop
Maus - iPhone
Touch - Surface Pro Maus ← falsch!
Auch bei einem Test unter https://jsfiddle.net/Blackbam/zkd2cs0t/16/ ergab sich dasselbe Ergebnis – das Gerät mit Touchscreen und Maus wird identisch zum Desktop-Gerät erkannt.