CODEWITHSUNDEEP
csshovermapsmapboxmapbox-gl-js
flash
flash

Reputation: 1519

remove background-color on hover in css from mapbox maps

I am working on mapbox maps https://jsfiddle.net/kpcxqo9s/embedded/result which on hover gives the purple background color.

The CSS code which I have used in the entire fiddle is:

.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;
}

Problem Statement:

I am wondering what changes I need to do in the fiddle so that on hover it doesn't show any background color. At this moment, it is showing purple.

This is what I have added in the code but it didn't work.

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

Upvotes: 0

Views: 346

Answers (1)

razemauze
razemauze

Reputation: 2676

If you change the color in this part of the code (line 313-319):

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

to transparent, there wont be a hover-color. The code will look like this, then:

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

Upvotes: 2

Related Questions