时间戳

首页 > 解决方案 > 在 d3 中使用悬停来改变颜色时遇到问题

svg - 在 d3 中使用悬停来改变颜色时遇到问题

问题描述

我在地图上添加了一些圆圈，并希望在将鼠标悬停在圆圈上时将其从黑色变为橙色。我尝试了两种不同的方法：

  1. CSS：圆圈：悬停{填充：橙色}

  2. 带有鼠标悬停事件。部分鼠标悬停工作（例如，我可以更改圆的半径），但将填充设置为不同的颜色不起作用。任何想法为什么？

标签： svgd3.jshoverfill

解决方案

如果您还没有找到解决方案，这是我的建议，首先向圆圈添加一个类，然后添加 mouseover 和 mouseout

.attr("class","circleClass")
.on("mouseover",mouseover)
.on("mouseout",mouseout)

在您可以使用 mouseover 和 mouseout 更改颜色之后

function mouseover(event){
    $(".circleClass").css({"fill":"blue"})
}
function mouseout(event){
    $(".circleClass").css({"fill":"red"})
}

推荐阅读