D3 mouseover transitions gets "stuck"
d3.js, hover, javascript
Solution
I think what is going on is that when you have the `.transition` on only the `mouseover`, the transition still has not run its course when you leave before 1000ms have expired. So when you leave early, the mouseover transition is still running, and there is no transition call on the mouseout event to override this transition. (Apparently not even the `mouseout` event will stop the `.transition` associated with the `mouseover` event.)
However, as you noted, when you do put a `transition` on the mouseout event, the problem goes away. And I believe this is because the mouseout `transition` takes precedence over the `mouseover` `.transition`, so having a `.transition` on the `mouseout` event puts the `mouseout` event back in control.
You can see it in action here if you comment out the `.transition` on the `mouseout` event.
http://jsfiddle.net/Ldmv6/1/
Also worth reading is Chapter 10 from Scott Murray's upcoming d3 book: http://ofps.oreilly.com/titles/9781449339739/_interactivity.html
Problem
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 `mouseover` and `mouseout` for the `.on`-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? 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: ``` 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"); }); ```