CODEWITHSUNDEEP
javascriptcssd3.jssvg
thatOneGuy
thatOneGuy

Reputation: 10642

Some CSS styles not working on SVG

I am working on this fiddle : https://jsfiddle.net/thatOneGuy/x2pxx92e/6/

I have this code for mouseover and out events : 

d3.select('#circleSVG').on('mouseover', function(d) {
  console.log('mouseover')

  d3.select(this).classed('testCircle', true)
  console.log(this)
}).on('mouseout', function(){

  d3.select(this).classed('testCircle', false)
})

The testCircle class looks like so : 

.testCircle{
  fill: orange;
  opacity:0.25;
}

But the only style that gets brought through on this class is the opacity. It doesn't change the fill. Any idea why ?

Upvotes: 0

Views: 6837

Answers (4)

Lucas Oliveira
Lucas Oliveira

Reputation: 677

You are looking to change a class, but you also have an ID to define the svg color, so it's better to change the color of the ID when it's hover:

#circleSVG:hover{
  fill: orange;
  opacity:0.25;
}

To change the color by the ID, you can use 

element = document.getElementById(id);

Upvotes: 0

sandrina-p
sandrina-p

Reputation: 4170

Why do you use JS to accomplish that? You can use only css.

#circleSVG {
  fill: red;
  stroke: green;
}

#circleSVG:hover {
  fill: orange;
  opacity: 0.25;
}

https://jsfiddle.net/x2pxx92e/11/

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115374

Specificity

The ID has a higher specifity that the class.

Just make the selector more specific. important is not recommended.

#circleSVG {
  fill: red;
  stroke: green;
}

#circleSVG.testCircle{
  fill: orange;
  opacity:0.25;
}

JSfiddle

Upvotes: 3

Dani Corretja
Dani Corretja

Reputation: 311

The problem is basically how the CSS selectors works.

Basically an id selector (#) is more specific than a class selector (.). So the "fill: orange" property in the class selector (.testCircle) is not being applied because the id selector (#testCircle) is more specific and also have a fill property. On the other hand, the opacity property is working because the id selector doesn't specify that property.

To fix this you can add "!important" as follow:

.testCircle{
  fill: orange !important;
  opacity:0.25;
}

Or even better, make your selector more specific:

#circleSVG.testCircle{
   fill: orange !important;
   opacity:0.25;
}

Upvotes: 2

Related Questions