gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 15:44:47 25 4
gpt4 key购买 nike

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

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

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

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

最佳答案

我认为您无法在 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 时读过的内容。也许当时的浏览器支持不如现在。

关于css - d3 中鼠标悬停时使矩形/圆形变暗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20002625/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com