Question

我正在制作一张相当大的地图，上面有很多不同的区域和文字，有点像国家。我想在鼠标悬停在此区域时添加鼠标悬停效果。效果应该添加阴影并改变其不透明度。当我将鼠标悬停在该区域外时，不透明度应该恢复到原来的状态，阴影效果应该消失。我设法做到了这一点但是当我在这个区域添加文本时，它会让事情变得混乱。当我将鼠标悬停在内部区域的文本时根本不应再次调用时，会再次调用on hover效果。我做了一个小提琴，直到我也悬停在文本上。我正在使用D3.js库进行编码。

 var groupAreas = "";

 groupAreas = d3.selectAll(".area-group");

 groupAreas.on("mouseover", fadeInArea)
   .on("mouseout", fadeOutArea)
   .on("click", zoomIn);

 var initialOpacity = 0;

 function fadeInArea() {
   //Get its initial opacity
   initialOpacity = d3.select(this).select("path").style("opacity");

   d3.select(this).transition(500).attr("filter", "url(#shadow-filter-1)").style("cursor", "pointer");
   d3.select(this).select("path").transition(500).style("opacity", 0.7);
 }

 function fadeOutArea() {
   d3.select(this).transition(500).attr("filter", null).style("cursor", "default");
   d3.select(this).select("path").transition(500).style("opacity", initialOpacity);

 }

https://jsfiddle.net/qx5u9uo4/6/

该区域的原始不透明度为0.4。当我将鼠标悬停在该区域上时，它会变为0.7并添加阴影效果。当我外出时，它应该回到0.4。然而，如果我进入该区域并将鼠标悬停在文本上，则OnMouseOver会再次被调用，然后将0.7设置为原始不透明度，因此当我实际离开该区域时再也不会再回到0.4。

我认为问题可能在于我的DOM svg元素的顺序？

  <g class="area-group">
    <path id="area-1" d="M502.2 581.4h-53.5v-61l167.4 70.4v34.6H502.2z" />
    <text transform="translate(542.4 614)"> FOO </text>
    <text transform="translate(459.4 571.2)"> BAR </text>
    <text transform="translate(521.1 592.9)"> / </text>
  </g>

Answer 1

听起来你只想阻止text元素接收指针事件：

.area-group>text {
  pointer-events: none;
}

关于SVG组的悬停效果

1 个答案: