ulotka Js przycisk niestandardowego sterowania dodać (tekst, hover)

Question

Poszłam za this control-button-leaflet tutorial i zadziałało dla mnie. Teraz chcę:

1. pokazać jakiś tekst kiedy najechaniu na przycisk (jak za pomocą przycisków zbliżenia)
2. zmienić kolor przycisku, gdy unoszą się nad nim
3. móc napisać tekst wewnątrz przycisk zamiast obrazu.

Oto kod:

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

Wydaje się, że bardziej potrzebny jest przycisk niż Gr:

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

1. Następnie można łatwo ustawić tekst mouseover:

   container.title="No cat"; 
   

2. A niektórzy Tekst zamiast obrazu:

   container.value = "42"; 
   

3. I można użyć zdarzenia myszy do stylu przycisku:

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

(można oczywiście zrobić to ostatnia część z css, może być bardziej elegancki)

Pełny przykład: http://codepen.io/anon/pen/oXVMvy