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

@@ -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
 

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 {