我对这个琴的工作：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

回答

特异性

相关问题