CSS hover通用兄弟选择器控制前置元素失效，D3饼图场景如何解决？

问题原因 #

是的，这就是规则失效的核心原因。CSS中的~是后续兄弟选择器，仅能匹配同一父元素下，出现在当前元素之后的同级兄弟元素。你渲染后的DOM里#keya在#keyb之前，所以#keyb:hover ~ #keya无法匹配到前置的#keya元素，自然不生效。

解决方案 #

这里推荐两种常用的解决方式，可根据需求选择：

方案1：使用D3事件监听实现（推荐） #

直接通过D3绑定鼠标事件来控制对应元素的样式，不受DOM顺序限制，还可以轻松扩展到任意元素的交互逻辑，在原有绘制path的代码之后追加如下逻辑即可：

d3.selectAll("path")
.on("mouseover", function(event, d) {
  // 示例：hover #keyb时将#keya设为黑色
  if (d.data.key === "b") {
    d3.select("#keya").style("fill", "black");
  }
})
.on("mouseout", function(event, d) {
  // 鼠标移出时恢复原颜色
  if (d.data.key === "b") {
    d3.select("#keya").style("fill", color("a"));
  }
});

方案2：调整DOM元素的生成顺序 #

如果交互逻辑固定，也可以调整D3绑定数据的顺序，让keyb出现在keya之前，这样原CSS选择器就能生效，需要注意调整后饼图层叠顺序可能变化，要确认是否符合展示需求：

// 调整数据顺序，将b对应的条目排在a前面
var data_ready = pie(d3.entries(data).sort((x,y) => {
  if(x.key === 'b') return -1
  if(y.key === 'a') return 1
  return 0
}))

内容的提问来源于stack exchange，提问作者Ahsan Farooqui