Question

我已经在传单地图中创建了多个控件，我希望将其用作样式为按钮的复选框，即，它是一个在按下时具有不同样式的按钮，并在再次按下时返回到原始样式。

我可以使用CSS或类似的方法来更改悬停样式：

var MyCustomControl = L.Control.extend({
                        options: {
                            position: 'topright'
                        },
                        onAdd: function (map) {
                          var container = L.DomUtil.create('checkbox', 'my-custom-control');
                          container.onmouseover = function(){

                               container.style.backgroundColor = 'blue'; 

                          }
                          container.onmouseout = function(){

                               container.style.backgroundColor = 'pink'; 

                          }
                          ....

但是当使用onmouseclick时，我根本无法使其工作-而且我也不应该在CSS中做到这一点。我的悬浮css看起来像这样：

.my-custom-control {
        padding: 1px 4px;
        background: rgba(255,255,255,0.7);
        color: black;
        font: 10px Arial, sans-serif;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
        width: 55px;
        cursor: pointer;
}

.my-custom-control:hover{

        background: rgba(255,255,255,0.9);
        border: 2px solid blue;


}

.my-custom-control:empty {
        display: none;
}

Answer 1

我通过使用它来使它工作：

container.onclick = function(){ container.classList.toggle("selected_transportation"); }

其中“ selected_transportation”是css类，描述按下时的样式。事实证明，我无法获得这种简单的解决方案来工作的原因：

container.style.backgroundColor = 'pink';

因为我不小心写了'onmouseclick'而不是'onclick'：）

将传单控件设置为复选框按钮的样式

1 个答案: