我對這個琴的工作：https://jsfiddle.net/thatOneGuy/x2pxx92e/6/一些CSS樣式不工作的SVG

我有鼠標懸停並進行事件驗證碼：

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

但是，這個課程帶來的唯一風格是不透明。它不會改變填充。任何想法爲什麼？

來源

2016-10-17 thatOneGuy

@lamelemon傳說，一直在試圖弄明白了一段時間，日ank you – thatOneGuy

@lamelemon有沒有必要使用！重要的是，這是一個非常糟糕的做法 –

特異性

的ID有該類更高的特性。

只是使選擇器更具體。不建議使用important。

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

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

JSfiddle

來源

2016-10-17 13:40:50

你能告訴我怎麼不推薦它？在我的實際離線代碼中沒有可以使用的ID，因爲有數百個節點，所以我只是使用類？ – thatOneGuy

「重要」只應作爲絕對最後的手段。一旦應用，幾乎不可能再次覆蓋** ** –

好的謝謝，我會做更多的研究。我認爲在我的情況下，它應該沒問題:) – thatOneGuy

問題基本上是CSS選擇器的工作原理。

基本上，id選擇符（＃）比類選擇符（。）更具體。因此，類選擇器（.testCircle）中的「fill：orange」屬性未被應用，因爲id選擇器（#testCircle）更具體，並且也具有fill屬性。另一方面，opacity屬性正在工作，因爲id選擇器沒有指定該屬性。

爲了解決這個問題，你可以添加如下「重要！」：

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

甚至更好，讓您選擇更具體：

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

來源

2016-10-17 13:39:31

你爲什麼用JS來實現這一目標？你只能使用CSS。

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

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

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

來源

2016-10-17 13:48:50

抱歉應該說，我的離線版本需要點擊事件而不是懸停 – thatOneGuy

您正在尋找改變類，但你也有一個ID來定義SVG的顏色，所以最好更改ID的顏色時，它的懸停：

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

用ID改變顏色，你可以使用

element = document.getElementById(id);

來源

2016-10-17 13:57:09

一些CSS樣式不工作的SVG

回答

特異性

相關問題