特异性

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

特异性

ID具有更高的类别。

只需使选择器更具体。

important

JSfiddle

Answer 2

问题基本上是CSS选择器的工作原理。

基本上，id选择器（＃）比类选择器（。）更具体。因此，类选择器（.testCircle）中的“fill：orange”属性未被应用，因为id选择器（#testCircle）更具体，并且还具有fill属性。另一方面，opacity属性正常工作，因为id选择器没有指定该属性。

要解决此问题，您可以添加“！important”，如下所示：

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

甚至更好，让您的选择器更具体：

#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

您正在寻找更改课程，但您还有一个ID来定义svg颜色，因此在ID悬停时更改ID的颜色会更好：

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

要按ID更改颜色，您可以使用

element = document.getElementById(id);

一些CSS样式不适用于SVG

4 个答案:

特异性