javascript - 将鼠标悬停在标记上时不要更改鼠标图标

标签 javascript css leaflet

我有一张带有许多标记的 map 。当用户单击一个标记时,该标记的信息将显示在侧 Pane 中。为了实现这一点,我已向标记添加了“单击”监听器,并或多或少地按照 this SO answer 中的建议存储标记标识符。 .

现在,在某些模式下,我不希望标记可单击(但仍希望它们出现在屏幕上)。对我来说,删除所有“点击”监听器很容易。然而,当我用鼠标悬停在它们上时,图标确实从“张开的手掌”变成了“尖头的手”,这让用户感到困惑。经过调查,我发现 Canvas 类通常具有 leaflet-zoom-animated 类,但是当我将鼠标悬停在标记上时,会添加 leaflet-interactive 类。我可以使用以下方法更改光标:

.leaflet-interactive {
    cursor: crosshair !important;
}

...但这有两个问题:

  1. 我无法根据应用程序所处的各种用户交互模式来打开和关闭它
  2. 它仍然很刺耳,因为光标确实发生了变化,而且,我无法将其更改为 Leaflet 通常使用的张开手掌光标,因为那是非默认光标,我不清楚如何访问它。

最佳答案

如果您可以删除点击监听器,我想您还可以向标记添加一个 css 类。这是一个例子http://jsfiddle.net/Mossart/w9830at1/7/ (看顶部标记)

var breakside = [45.571601194035345, -122.65673562884331];
var marker1 = L.marker(breakside).addTo(map);
marker1._icon.classList.add("not-clickable");

CSS:

.not-clickable {
  cursor: grab;
}

关于javascript - 将鼠标悬停在标记上时不要更改鼠标图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60614797/

相关文章:

javascript - 如何捕获 HTML 元素(如按钮)的 tabOut 事件?

html - 相对div高度

javascript - 将 Google 折线图放入 Leaflet 弹出窗口中

javascript - 点击延迟时间

javascript - 在 react 中将我的当前位置发送到谷歌地图

javascript - Bootstrap 表行选择

javascript - 如何防止 map.on ("click") 通过点击触摸板一次触发两次?

html - 输入按钮内的居中文本

php - 使用PHP进行 "Fluid"设计(使用视口(viewport)分辨率)

onclick - Leaflet:将点击事件添加到群集图标