I’ve created a weather timeline where you get to see additional info on-hover (like temperature and chance of rain).
However, as I scrub thru the timeline, it would lose the on-hover state at times… causing the timeline to have annoying flashes, like so (using Chrome here):
Any idea as to why this is happening?
You can try it out yourself…
Thanks in advance!
Does changing the “mousemove” event to “mouseover” and the “mouseout” event to “mouseleave” lead to the behavior you want?
(I can never get these straight either)
It helps in that it fixes the “flashing”… but now there’s a major lag when you move the cursor around (highly noticeable when you look at the time indicator).
Any other ideas?
(PS: Thanks again, @bgchen!)
Yeah, this is strange… In Firefox there doesn’t seem to be any appreciable lag, but I don’t see the precipitation percentage. In Chrome, the precipitation appears but you’re right that something is getting stuck. I’ll poke at this some more…
edit 1: OK, the Chrome issue seems to be fixed by just adding another listener for mousemove (see the updated shared notebook).
edit 2: The reason the precipitation isn’t appearing in Firefox seems to be that the alignment-baseline property isn’t supported on text elements, see this SO question. You should use dominant-baseline on text elements instead. I’ve updated the notebook to fix this as well.
I changed the mouseout to mouseleave and it seemed to work well. Forked here:
tested on Firefox and Chrome.
You’re right! Messing around with mouseenter was unnecessary in my fork.
Yep, I think you want @bchoatejr’s fork.
A mouseout event will trigger whenever the mouse exits any descendant element, whereas a mouseleave event will only trigger when the mouse exits the SVG element (the element you are listening to). So, you definitely want mouseleave here to trigger hideMoreInfo. Alternatively, you could use CSS :hover to change styles.
If you wanted, you could listen to both mouseenter and mousemove to trigger revealMoreInfo: .on("mouseenter mousemove", revealMoreInfo). But I think mousemove is probably sufficient by itself.