diff --git a/src/mapbox/mapbox.ts b/src/mapbox/mapbox.ts
index 4ed449c4d..576f5525c 100644
--- a/src/mapbox/mapbox.ts
+++ b/src/mapbox/mapbox.ts
@@ -786,6 +786,13 @@ export default class Mapbox {
     }
   };
 
+  _uniqueLayers(features: MapboxGeoJSONFeature[] | null) {
+    if (!features) {
+      return [];
+    }
+    return [...new Set(features.map(f => f.layer.id))];
+  }
+
   _updateHover(e: MapMouseEvent) {
     const {props} = this;
     const shouldTrackHoveredFeatures =
@@ -793,7 +800,8 @@ export default class Mapbox {
 
     if (shouldTrackHoveredFeatures) {
       const eventType = e.type;
-      const wasHovering = this._hoveredFeatures?.length > 0;
+      const hoveredLayers = this._uniqueLayers(this._hoveredFeatures);
+      const hoveredLayersCount = hoveredLayers.length;
       let features;
       if (eventType === 'mousemove') {
         try {
@@ -806,14 +814,23 @@ export default class Mapbox {
       } else {
         features = [];
       }
-      const isHovering = features.length > 0;
+      const hoveringLayers = this._uniqueLayers(features);
+      const hoveringLayersCount = hoveringLayers.length;
 
-      if (!isHovering && wasHovering) {
+      if (hoveringLayersCount < hoveredLayersCount) {
         e.type = 'mouseleave';
         this._onPointerEvent(e);
       }
+      if (hoveringLayersCount === hoveredLayersCount && hoveringLayersCount !== 0) {
+        if (hoveringLayers.some(layer => hoveredLayers.indexOf(layer) === -1)) {
+          e.type = 'mouseleave';
+          this._onPointerEvent(e);
+          e.type = 'mouseenter';
+          this._onPointerEvent(e);
+        }
+      }
       this._hoveredFeatures = features;
-      if (isHovering && !wasHovering) {
+      if (hoveringLayersCount > hoveredLayersCount) {
         e.type = 'mouseenter';
         this._onPointerEvent(e);
       }