假设我想为导航菜单创建常规悬停效果,但我使用D3过渡来“软化”效果而不是CSS.对于.on方法,使用mouSEOver和mouSEOut可以正常工作.但问题是,如果鼠标在转换完成之前离开悬停链接,则转换会卡住.如何避免这种副作用？

例如,使用此代码,即使鼠​​标移动到其他位置,如果执行速度过快,底部边框仍显示为橙色：

d3.selectAll("a")
    .on("mouSEOver",function() { 
       d3.select(this)
      .style("border-bottom-color","#fff")
      .transition()
      .duration(1000)
      .style("border-bottom-color","#B23600"); })
    .on("mouSEOut","#fff"); });