从 mapbox 地图中删除鼠标悬停在 css 时的背景颜色

Question

我正在处理 mapbox 地图 https://jsfiddle.net/kpcxqo9s/embedded/result，悬停时会给出紫色背景色。

我在整个fiddle中使用的CSS代码是：

.box {
  width: 300px
}
.riding
{
}
  font-weight: bold
p, h1, #controls li label {
          font-family: nexa,arial,helvetica;
}
h1 {
  font-size: 24px;
}
p {
  font-size: 14px;
}
#controls li label {
  font-size: 14px;
}

.mapboxgl-canvas:hover {
background-color: #0000ff !important;
}

问题陈述：

我想知道我需要在 fiddle 中做什么更改，以便在悬停时不显示任何背景颜色。这一刻，它显示紫色。

这就是我在代码中添加的内容，但它不起作用。

.mapboxgl-canvas:hover {
background-color: #0000ff !important;
}

Answer 1

如果在这部分代码（第 313-319 行）中更改颜色：

// Change style on 'featureEnter'
stopsInteractivity.on('featureEnter', featureEvent => {
    featureEvent.features.forEach((feature) => {
        feature.color.blendTo('#9278d1', 100);
        feature.width.blendTo(16, 100);
    });
});

到transparent，不会有hover-color。代码将如下所示：

// Change style on 'featureEnter'
stopsInteractivity.on('featureEnter', featureEvent => {
    featureEvent.features.forEach((feature) => {
        feature.color.blendTo('transparent', 100);
        feature.width.blendTo(16, 100);
    });
});

从 mapbox 地图中删除鼠标悬停在 css 时的背景颜色

remove background-color on hover in css from mapbox maps

css

maps

hover

mapbox

mapbox-gl-js