title: D3 mouseover transitions gets "stuck"
body: <p>Say I want to create regular hover effects for a navigation menu, but instead of CSS I use D3 transitions to "soften up" the effect. This works fine using <code>mouseover</code> and <code>mouseout</code> for the <code>.on</code>-method. The problem, though, is that the transition gets stuck if the mouse leaves the hovered link before the transition is done. How does one avoid that side effect?</p>
  
  <p>For instance, with this code, the bottom border is still displayed in orange even after the mouse has moved elsewhere, if you do it too fast:</p>
  
  <pre><code>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"); });
  </code></pre>