title: Mapbox/leaflet.js change color of marker on hover
body: <p>UPDATE: I have found that when I am setting the geojson, it is creating the new set of markers and immediately triggering the mouseover event. It infinitely loops it and breaks it. I changed it to click and it works, so how can I make this work with hover now?</p>
  
  <p>I am loading festivals onto my map on the right side to for my festival index page. This is similar functionality to yelp's index page. So I have successfully loaded the data as geoJSON to my markerLayer, but when I set the geojson of the data to change the color of the marker that is being hovered, it disables the 'click' and 'mouseout' events. There are a lot of ways to order this code, and I have tried a lot with moving stuff out of the ajax call but I can't seem to get it working.</p>
  
  <p>Why won't this code work? And what can I do to make it work? I know it has to do with my lack of understanding of layers, mapbox, and setting geojson.</p>
  
  <p>I also wanted to know if there is a better solution to my problem like maybe using font awesome and changing the font color instead. All feedback is welcome!</p>
  
  <p><img src="https://i.stack.imgur.com/3xNfA.png" alt="Festival Index"></p>
  
  <pre><code>map = L.mapbox.map("index-map", "jbhatab.map-iu8zewt3")
      markerLayer = L.mapbox.markerLayer()
      $.ajax
        dataType: 'text'
        url: 'festivals.json'
        success: (data) -&gt;
          geojson = $.parseJSON(data)
          markerLayer.setGeoJSON(geojson)
          console.log markerLayer
  
          $(".event-list-item").hover (-&gt;
            $(this).addClass "hover"
            console.log $(this).data('festival-id')
          ), -&gt;
            $(this).removeClass "hover"
  
          markerLayer.on "mouseover", (e) -&gt;
            e.layer.feature.properties['old-color'] = e.layer.feature.properties['marker-color']
            e.layer.feature.properties['marker-color'] = '#000'
            e.layer.openPopup()
            markerLayer.setGeoJSON(geojson)
            console.log e.target
            console.log 'mousover'
  
          markerLayer.on "mouseout", (e) -&gt;
            console.log 'mouseout'
  
          markerLayer.on "click", (e) -&gt;
            console.log 'click'
            e.layer.unbindPopup()
            window.open '/festivals/' + e.layer.feature.properties.id
  
          markerLayer.addTo(map)
          map.fitBounds markerLayer.getBounds()
  </code></pre>