いくつかのCSSスタイルは、私がこのフィドルに取り組んでいますSVG

Question

に取り組んでいない：https://jsfiddle.net/thatOneGuy/x2pxx92e/6/

私はマウスオーバー用やイベントアウトこのコードを持っている：

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) 
}) 

testCircleクラスはそうのようになります。

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

しかし、このクラスで持ち込まれる唯一のスタイルは、不透明度です。塗りつぶしは変更されません。どんな考え？

Answer 1

特異

を：

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

またはより良い、あなたのセレクタは、より具体的にする： "！重要な"

あなたは次のように追加することができ、これを修正するにはそのクラスより高い特定性。

セレクタをより具体的にするだけです。 importantはお勧めしません。

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

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

JSfiddle

Answer 2

問題は基本的にCSSセレクタがどのように機能するかです。

基本的に、idセレクタ（＃）はクラスセレクタ（。）よりも具体的です。したがって、クラスセレクタ（.testCircle）の "fill：orange"プロパティは適用されません。これは、idセレクタ（#testCircle）がより具体的で、fillプロパティも持っているためです。一方、idセレクタはそのプロパティを指定していないため、opacityプロパティが機能しています。 IDを持っている

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

Answer 3

は、なぜあなたはそれを達成するためにJSを使用していますか？あなただけのCSSを使用することができます。

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

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

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

Answer 4

あなたがクラスを変更しようとしているが、あなたはまた、SVGの色を定義するためのIDを持っているので、それはそれはホバーだ時にIDの色を変更すると良いでしょう：

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

IDで色を変更するには、

element = document.getElementById(id);