css - 从 mapbox map 中删除悬停在 css 中的背景颜色

Question

我正在处理 mapbox map 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);
    });
});

到透明，不会有悬停颜色。代码将如下所示:

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