Broschüre JS benutzerdefinierte Steuerelement Schaltfläche hinzufügen (Text, Hover)

Question

Ich folgte this control-button-leaflet tutorial und es funktionierte für mich. Jetzt möchte ich:

1. einen Text zeigen, wenn ich über die Schaltfläche schweben (wie mit den Zoomtasten)
2. ändern die Farbe der Schaltfläche, wenn ich den Mauszeiger über sie
3. der Lage sein, Text nach innen zu schreiben die Schaltfläche anstelle eines Bildes.

Hier ist der Code:

var customControl = L.Control.extend({   
     options: { 
     position: 'topleft' 
     }, 

     onAdd: function (map) { 
     var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom'); 

     container.style.backgroundColor = 'white';  
     container.style.backgroundImage = "url(http://t1.gstatic.com/images?q=tbn:ANd9GcR6FCUMW5bPn8C4PbKak2BJQQsmC-K9-mbYBeFZm1ZM2w2GRy40Ew)"; 
     container.style.backgroundSize = "30px 30px"; 
     container.style.width = '30px'; 
     container.style.height = '30px'; 

     container.onclick = function(){ 
      console.log('buttonClicked'); 
     } 

     return container; 
     } 
    }); 

    var map; 

    var readyState = function(e){ 
     map = new L.Map('map').setView([48.935, 18.14], 14); 
     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); 
     map.addControl(new customControl()); 
    } 

    window.addEventListener('DOMContentLoaded', readyState); 

Answer 1

Es scheint, dass Sie mehr einen Knopf als ein div benötigen:

var container = L.DomUtil.create('input'); 
    container.type="button"; 

1. Dann suchen Sie ganz einfach ein Mouseover-Text einstellen:

   container.title="No cat"; 
   

2. Und einige Text anstelle eines Bildes:

   container.value = "42"; 
   

3. Und Sie die Mausereignisse können Sie die Taste, um Stil:

   container.onmouseover = function(){ 
       container.style.backgroundColor = 'pink'; 
   } 
   container.onmouseout = function(){ 
       container.style.backgroundColor = 'white'; 
   } 
   

(Sie könnten natürlich tun, um diesen letzten Teil mit css, könnte eleganter sein)

Volles Beispiel: http://codepen.io/anon/pen/oXVMvy