css - d3 中鼠标悬停时使矩形/圆形变暗

Question

我正在使用 d3 绘制几个用某些颜色填充的矩形和圆形。

现在，当鼠标指针悬停在我的对象上时，它们会变暗。我的想法是使用 CSS，在每个对象周围的 g 标签上放置带有 alpha 的黑色背景:

g:hover {
  background-color: rgba(0, 0, 0, .5);
}

但这行不通。当我在那里放置 opacity: .5 时它确实有效，但我希望它更暗，而不是更亮。有人有什么提示吗？ 谢谢!

Answer 1

我认为您无法在 SVG 元素上可靠地使用悬停伪代码。相反，使用 d3 在鼠标悬停时添加一个类，并在鼠标移开时将其删除。

例如:

svg.append("g")
    .on("mouseover", function() {
        d3.select(this).classed("hover", true);
      })
    .on("mouseout", function() {
         d3.select(this).classed("hover", false);
    })

然后在 CSS 中

g.hover {
    background-color: rgba(0, 0, 0, .5);
}

希望有帮助。

编辑:也许你可以使用 :hover。请参阅此问题和答案 https://stackoverflow.com/a/9210392/2594702 .

基本上它说使用 fill: rgba(0, 0, 0, .5) 而不是 background-color。

我确信我记得在学习 D3 时使用 mouseover 和 mouseout 时读过的内容。也许当时的浏览器支持不如现在。