title: How to stop cursor flickering over mapbox marker icons?
body: <p>How do I stop cursor flickering over my Mapbox icons?  Here is the live site where you can see the problem when hovering over the marker icons:  <a href="https://rustic-waters-group.thesparksite.com/lakes/" rel="nofollow noreferrer">https://rustic-waters-group.thesparksite.com/lakes/</a></p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>mapboxgl.accessToken = 'pk.eyJ1IjoiZG1pdHJpbWFydGluIiwiYSI6ImNreHRobHRmcjVqM3cydmt5NWkxdWNibTcifQ.CuN5Dwc963TW-BKRcowxBA';
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/dmitrimartin/ckxtj5aur4fvv15mrhmihala8',
    center: [-89.2, 44.33],
    zoom: 9.2
  });
  
  map.on('load', () =&gt; {
  
    const popup = new mapboxgl.Popup({
      closeButton: false,
      closeOnClick: false
    });
  
    map.on('mouseenter', 'lakes', (event) =&gt; {
      map.getCanvas().style.cursor = 'pointer';
      const features = map.queryRenderedFeatures(event.point, {
        layers: ['lakes']
      });
      if (event.features.length === 0) return;
      popup.setLngLat(features[0].geometry.coordinates);
      popup.setHTML('&lt;h3 class="lake-popup"&gt;' + features[0].properties.title + '&lt;/h3&gt;');
      popup.setMaxWidth("calc(100vw - 40px);");
      popup.addTo(map);
    });
  
    map.on('mouseleave', 'lakes', () =&gt; {
      map.getCanvas().style.cursor = '';
      popup.remove();
    });
  
    map.on('click', 'lakes', (event) =&gt; {
      const features = map.queryRenderedFeatures(event.point, {
        layers: ['lakes']
      });
      if (event.features.length === 0) return;
      window.location.href = ('/lakes/' + features[0].properties.url + '/');
    });
  
    document.getElementById("lakes-header").onmouseover = function() {
      MyMouseOver();
    };
  
    function MyMouseOver() {
      document.getElementById("wrapper").style.display = "none";
      document.getElementById("lakes-header").style.display = "none";
    }
  
  });</code></pre>
  </div>
  </div>
  </p>