5

假设我想为导航菜单创建常规悬停效果，但我使用 D3 过渡来“软化”效果，而不是 CSS。这适用于mouseover-方法。但是，问题在于，如果鼠标在过渡完成之前离开悬停的链接，则过渡会卡住。如何避免这种副作用？mouseout.on

例如，使用此代码，即使鼠​​标移动到其他地方，底部边框仍显示为橙色，如果您执行得太快：

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

1 回答 1

4

我认为正在发生的事情是，当您.transition只有 on时mouseover，当您在 1000 毫秒到期之前离开时，过渡仍然没有进行。所以当你提早离开时，mouseover 过渡仍在运行，并且没有对 mouseout 事件进行过渡调用来覆盖此过渡。（显然，即使是mouseout事件也不会停止.transition与事件的关联mouseover。）

但是，正如您所指出的，当您transition在 mouseout 事件上放置 a 时，问题就消失了。我相信这是因为 mouseouttransition 优先于mouseover .transition，因此在事件上设置 a.transition会使mouseout事件mouseout重新得到控制。

如果您.transition对mouseout事件发表评论，您可以在此处看到它的实际效果。

http://jsfiddle.net/Ldmv6/1/

同样值得一读的是Scott Murray即将出版的 d3 书中的第 10 章：http: //ofps.oreilly.com/titles/9781449339739/_interactivity.html

于 2013-02-18T21:12:50.157 回答