удалить цвет фона при наведении курсора в css из карт

Question

Я работаю на картах mapbox https://jsfiddle.net/kpcxqo9s/embedded/result, которая при наведении курсора дает фиолетовый цвет фона.

Код 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;
}

Постановка задачи:

Мне интересно, какие изменения мне нужнысделать в скрипке, чтобы при наведении на экран не отображался какой-либо фоновый цвет.В этот момент он показывает фиолетовый.

Это то, что я добавил в код, но он не работал .

.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, цвет при наведении не будет.Код будет выглядеть так:

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