title: How to get marker popup on hover element from list using Leaflet and L.Control.ListMarkers?
body: <p>Using Leaflet and plugins like <a href="https://github.com/stefanocudini/leaflet-list-markers" rel="nofollow noreferrer">ListMarkers</a>, I display a list of visible markers on the map. After hovering over the appropriate <code>&lt;li&gt;</code> element in the List, I want the marker popup to be displayed. The <code>&lt;li&gt;</code> element contains various information about the product, unfortunately after hovering over them, the popup appears and disappears. How to make it that if I hover entire <code>&lt;li&gt;</code> element popup will show and not go crazy of each element separately ?</p>
  
  <pre><code>        var list = new L.Control.ListMarkers({ layer: markers, itemIcon: null });
              list.addTo(map);
  
              list.on('item-mouseover', function(e) {
                  e.layer.setIcon(L.icon({
                      iconUrl: '/marker2.png'
                  }));
                  e.layer.openPopup();
              }).on('item-mouseout', function(e) {
                  e.layer.setIcon(L.icon({
                      iconUrl: '/marker.png'
                  }))
                  e.layer.closePopup();
              });
  
              listaHTML = list.getContainer();
  
              document.getElementById("lista").appendChild(listaHTML);
  </code></pre>