From dd93ae9b91a08cf5e328701d8193da6a22d02c9e Mon Sep 17 00:00:00 2001
From: Thomas Schmidt <tschmidt@suse.com>
Date: Sat, 4 Jan 2025 08:11:21 +0100
Subject: [PATCH] Only apply css hover effect on non-touch devices (#5285)

* Only apply hover effect on non-touch devices

Applying hover effect on touch devices has an undesired effect: The element gets set to hover state on touch and stays like that until the next touch event.
Using the :active state gives a nicer feedback by highlighting the button only for the duration of the touch.

* add line to changelog
---
 CHANGELOG.md            |  3 ++-
 src/css/maplibre-gl.css | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6188de541..ce93f61a74 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,8 @@
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
-- _...Add new stuff here..._
+
+- Skip control button css hover effects on touch devices (https://github.com/maplibre/maplibre-gl-js/pull/5285)
 
 ## 5.0.0
 
diff --git a/src/css/maplibre-gl.css b/src/css/maplibre-gl.css
index 87569d6b60..37fa25d3c6 100644
--- a/src/css/maplibre-gl.css
+++ b/src/css/maplibre-gl.css
@@ -180,8 +180,14 @@
     opacity: 0.25;
 }
 
-.maplibregl-ctrl button:not(:disabled):hover {
-    background-color: rgb(0 0 0 / 5%);
+@media (hover: hover) {
+    .maplibregl-ctrl button:not(:disabled):hover {
+        background-color: rgb(0 0 0/5%);
+    }
+}
+
+.maplibregl-ctrl button:not(:disabled):active {
+    background-color: rgb(0 0 0/5%);
 }
 
 .maplibregl-ctrl-group button:focus:focus-visible {