How do you Hover in ReactJS - onMouseLeave not registered during fast hover over

Question

How can you achieve either a hover event or active event in ReactJS when you do inline styling   I ve found that the onMouseEnter  onMouseLeave approach is buggy  so hoping there is another way to do it   Specifically  if you mouse over a component very quickly  only the onMouseEnter event is registered  The onMouseLeave never fires  and thus can t update state    leaving the component to appear as if it still is being hovered over  I ve noticed the same thing if you try and mimic the   active  css pseudo-class  If you click really fast  only the onMouseDown event will register  The onMouseUp event will be ignored    leaving the component appearing active   Here is a JSFiddle showing the problem  https   jsfiddle net y9swecyu 5     Video of JSFiddle with problem  https   vid me ZJEO  The code   var Hover   React createClass       getInitialState  function             return               hover  false                       onMouseEnterHandler  function             this setState               hover  true                     console log  enter               onMouseLeaveHandler  function             this setState               hover  false                     console log  leave               render  function             var inner   normal          if this state hover                inner   hover                     return                lt div style  outer  gt                   lt div style  inner                      onMouseEnter  this onMouseEnterHandler                      onMouseLeave  this onMouseLeaveHandler   gt                       this props children                   lt  div gt               lt  div gt                        var outer         height   120px       width   200px       margin   100px       backgroundColor   green       cursor   pointer       position   relative     var normal         position   absolute       top  0      bottom  0      left  0      right  0      backgroundColor   red       opacity  0    var hover         position   absolute       top  0      bottom  0      left  0      right  0      backgroundColor   red       opacity  1    React render       lt Hover gt  lt  Hover gt                document getElementById  container

User · Answer

Have you tried any of these   onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp  SyntheticEvent  it also mentions the following   React normalizes events so that they have consistent properties across different browsers   The event handlers below are triggered by an event in the bubbling phase  To register an event handler for the capture phase  append Capture to the event name  for example  instead of using onClick  you would use onClickCapture to handle the click event in the capture phase

How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over

The Solution to How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over is

Most Viewed Questions: