title: Leaflet mouseout event on marker
body: <p>I wrote this code to change the icon of a marker on mouseover an change it back on mouseout but the mouseout event never seems to get triggered after the mouse over.<br>
  I also referred to this question (<a href="https://stackoverflow.com/questions/20109336/leaflet-mouseout-called-on-mouseover-event">Leaflet Mouseout called on MouseOver event</a>) but I dont know if that is the issue here. How should I resolve it if that is issue.</p>
  
  <pre><code>    L.marker([20.123,40,234],{icon:icon}).on('mouseover',function(e){
          this.setIcon(highlight);
      }).on('mouseout',function(e){
          this.setIcon(icon);
      }).addTo(map);
  </code></pre>
  
  <p>Edit 1: 
  Here is the complete code :</p>
  
  <pre><code>    var map = L.map('map').fitWorld();
      L.tileLayer("https://api.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",{           
          id:'mapankit.137364c3', 
          accessToken:'pk.eyJ1IjoibWFwYW5raXQiLCJhIjoiY2lramo5anZoMDdjMnVjajdjYWtqbXZ3eiJ9.uR_6t2C2f5Ib9qOPnt_l8Q'}).addTo(map);
  
      var icon = L.divIcon({
          html : '&lt;svg width="12px" height="12px"&gt;&lt;g&gt;&lt;path class="outer" d="M-5 0 A5 5 0 0 1 5 0 A5 5 0 0 1 -5 0" style="stroke-opacity: 1; stroke-width: 2; fill: white; stroke: rgb(0, 198, 228);" transform="translate(6,6)"&gt;&lt;/path&gt;&lt;path class="inner" d="M-2.5 0 A2.5 2.5 0 0 1 2.5 0 A2.5 2.5 0 0 1 -2.5 0" style="stroke-opacity: 1; stroke-width: 0; fill: white; stroke: white;" transform="translate(6,6)"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;',
          className : 'foo',
          iconAnchor : L.point(6,6)
      });
  
      var highlight = L.divIcon({
          html : '&lt;svg width="25px" height="25px"&gt;&lt;g&gt;&lt;path class="outer" d="M-10 0 A10 10 0 0 1 10 0 A10 10 0 0 1 -10 0" style="fill: white; stroke: rgb(0, 198, 228); stroke-width: 2;" transform="translate(12,12)"&gt;&lt;/path&gt;&lt;path class="inner" d="M-5 0 A5 5 0 0 1 5 0 A5 5 0 0 1 -5 0" style="fill: rgb(0, 198, 228); stroke: rgb(0, 198, 228); stroke-opacity: 1;" transform="translate(12,12)"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/svg&gt;',
          className : 'bar',
          iconAnchor : L.point(12,12)
      })
  
      L.marker([20.123,40,234],{icon:icon}).on('mouseover',function(e){
          this.setIcon(highlight);
      }).on('mouseout',function(e){
          this.setIcon(icon);
      }).addTo(map);
  </code></pre>