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

Note  This answer was for a previous version of this question where the question asker was trying to use JavaScript to apply css styles    which can simply be done with CSS    A simple css-only solution   For applying basic styles  CSS is simpler and more performant that JS solutions 99  of the time   Though more modern CSS-in-JS solutions     eg  React Components  etc     are arguably more maintainable    Run this code snippet to see it in action      x000D   x000D   hover-button  hover-button--on  x000D   hover-button hover  hover-button--off   x000D    display  none  x000D    x000D   x000D   hover-button hover  hover-button--on   x000D    display  inline  x000D    x000D   lt button class  hover-button  gt  x000D     lt span class  hover-button--off  gt Default lt  span gt  x000D     lt span class  hover-button--on  gt Hover  lt  span gt  x000D   lt  button gt  x000D   x000D   x000D

User · Answer

you can use onMouseOver  this onToggleOpen  and   onMouseOut  this onToggleOpen  to muse over and out on component

User · Answer

You can t with inline styling alone  Do not recommend reimplementing CSS features in JavaScript we already have a language that is extremely powerful and incredibly fast built for this use case -- CSS  So use it  Made Style It to assist   npm install style-it --save  Functional Syntax  JSFIDDLE   import React from  react   import Style from  style-it    class Intro extends React Component     render         return Style it          intro hover           color  red                         lt p className  intro  gt CSS-in-JS made simple -- just Style It  lt  p gt                export default Intro    JSX Syntax  JSFIDDLE   import React from  react   import Style from  style-it    class Intro extends React Component     render         return          lt Style gt                    intro hover             color  red                             lt p className  intro  gt CSS-in-JS made simple -- just Style It  lt  p gt       lt  Style gt         export default Intro

User · Answer

If you can produce a small demo showing the onMouseEnter   onMouseLeave or onMouseDown   onMouseUp bug  it would be worthwhile to post it to ReactJS s issues page or mailing list  just to raise the question and hear what the developers have to say about it   In your use case  you seem to imply that CSS  hover and  active states would be enough for your purposes  so I suggest you use them  CSS is orders of magnitude faster and more reliable than Javascript  because it s directly implemented in the browser   However   hover and  active states cannot be specified in inline styles  What you can do is assign an ID or a class name to your elements and write your styles either in a stylesheet  if they are somewhat constant in your application  or in a dynamically generated  lt style gt  tag   Here s an example of the latter technique  https   jsfiddle net ors1vos9

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

User · Answer

I personally use Style It for inline-style in React or keep my style separately in a CSS or SASS file     But if you are really interested doing it inline  look at the library  I share some of the usages below   In the component    import React from  react   import Style from  style-it    class Intro extends React Component     render         return          lt Style gt                        intro               font-size  40px                                   lt p className  intro  gt CSS-in-JS made simple -- just Style It  lt  p gt         lt  Style gt                export default Intro    Output         lt p class  intro  scoped-1  gt         lt style type  text css  gt            scoped-1 intro             font-size  40px                   lt  style gt         CSS-in-JS made simple -- just Style It       lt  p gt         Also you can use JavaScript variables with hover in your CSS as below    import React from  react   import Style from  style-it    class Intro extends React Component     render         const fontSize   13       return Style it          intro           font-size     fontSize  px      ES2015  amp  ES6 Template Literal string interpolation                package           color  blue                 package hover           color  aqua                        lt p className  intro  gt CSS-in-JS made simple -- just Style It  lt  p gt                export default Intro    And the result as below    lt p class  intro  scoped-1  gt     lt style type  text css  gt        scoped-1 intro         font-size  13px              scoped-1  package         color  blue              scoped-1  package hover         color  aqua           lt  style gt     CSS-in-JS made simple -- just Style It   lt  p gt

User · Answer

Use Radium    The following is an example from their website     x000D   x000D  var Radium   require  radium    x000D  var React   require  react    x000D  var color   require  color    x000D   x000D   Radium x000D  class Button extends React Component   x000D    static propTypes     x000D      kind  React PropTypes oneOf   primary    warning    isRequired x000D       x000D   x000D    render     x000D         Radium extends the style attribute to accept an array  It will merge x000D         the styles in order  We use this feature here to apply the primary x000D         or warning styles depending on the value of the  kind  prop  Since its x000D         all just JavaScript  you can use whatever logic you want to decide which x000D         styles are applied  props  state  context  etc   x000D      return   x000D         lt button x000D          style    x000D            styles base  x000D            styles this props kind  x000D             gt  x000D           this props children  x000D         lt  button gt  x000D         x000D      x000D    x000D   x000D     You can create your style objects dynamically or share them for x000D     every instance of the component  x000D  var styles     x000D    base    x000D      color    fff   x000D   x000D         Adding interactive state couldn t be easier  Add a special key to your x000D         style object   hover   focus   active  or  media  with the additional rules  x000D        hover     x000D        background  color   0074d9   lighten 0 2  hexString   x000D        x000D       x000D   x000D    primary    x000D      background    0074D9  x000D       x000D   x000D    warning    x000D      background    FF4136  x000D      x000D     x000D   x000D   x000D

User · Answer

I had a similar issue when onMouseEnter was called but sometimes the corresponding onMouseLeave event wasn t fired  here is a workaround that works well for me  it partially relies on jQuery    var Hover   React createClass       getInitialState  function             return               hover  false                       onMouseEnterHandler  function e            this setState               hover  true                     console log  enter               e currentTarget  one  mouseleave   function  e                this onMouseLeaveHandler              bind this                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   gt                       this props children                   lt  div gt               lt  div gt                         See on jsfiddle  http   jsfiddle net qtbr5cg6 1     Why was it happening  in my case   I am running a jQuery scrolling animation  through     item   animate   scrollTop  0     when clicking on the item  So the cursor doesn t leave the item  naturally   but during a the JavaScript-driven animation     and in this case the onMouseLeave was not fired properly by React  React 15 3 0  Chrome 51  Desktop

User · Answer

I ve just bumped into this same problem when listening for onMouseLeave events on a disabled button  I worked around it by listening for the native mouseleave event on an element that wraps the disabled button   componentDidMount         this watchForNativeMouseLeave       componentDidUpdate         this watchForNativeMouseLeave          onMouseLeave doesn t work well on disabled elements    https   github com facebook react issues 4251 watchForNativeMouseLeave         this refs hoverElement addEventListener  mouseleave        gt            if  this props disabled                this handleMouseOut                         render         return            lt span ref  hoverElement              onMouseEnter  this handleMouseEnter              onMouseLeave  this handleMouseLeave           gt               lt button disabled  this props disabled  gt Submit lt  button gt           lt  span gt             Here s a fiddle https   jsfiddle net qfLzkz5x 8

User · Answer

A package called styled-components can solve this problem in an ELEGANT way   Reference   Glen Maddern - Styling React Apps with Styled Components   Example   x000D   x000D  const styled   styled default x000D  const Square   styled div  x000D    height  120px  x000D    width  200px  x000D    margin  100px  x000D    background-color  green  x000D    cursor  pointer  x000D    position  relative  x000D     amp  hover   x000D      background-color  red  x000D       x000D    x000D  class Application extends React Component   x000D    render     x000D      return   x000D         lt Square gt  x000D         lt  Square gt  x000D        x000D      x000D    x000D   x000D     x000D     Render the above component into the div app x000D      x000D  ReactDOM render  lt Application   gt   document getElementById  app     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 6 1 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 6 1 react-dom min js  gt  lt  script gt  x000D   lt script src  https   unpkg com styled-components dist styled-components min js  gt  lt  script gt  x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I d use onMouseOver  amp  onMouseOut  Cause in React     The onMouseEnter and onMouseLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase    Here it is in the React documentation for mouse events

User · Answer

I know It s been a while since this question was asked but I just run into the same issue of inconsistency with onMouseLeave   What I did is to use onMouseOut   for the drop-list and on mouse leave for the whole menu  it is reliable and works every time I ve tested it  I saw the events here in the docs  https   facebook github io react docs events html mouse-events here is an example using https   www w3schools com bootstrap bootstrap dropdowns asp   handleHoverOff event       do what ever  for example I use it to collapse the dropdown   let collapsing   true    this setState  dropDownCollapsed   collapsing        render    return       lt div class  dropdown  onMouseLeave  this handleHoverOff bind this   gt         lt button class  btn btn-primary dropdown-toggle  type  button  data-toggle  dropdown  gt Dropdown Example        lt span class  caret  gt  lt  span gt  lt  button gt         lt ul class  dropdown-menu  onMouseOut  this handleHoverOff bind this   gt           lt li gt  lt a href     gt bla bla 1 lt  a gt  lt  li gt           lt li gt  lt a href     gt bla bla 2 lt  a gt  lt  li gt           lt li gt  lt a href     gt bla bla 3 lt  a gt  lt  li gt         lt  ul gt       lt  div gt

User · Answer

The previous answers are pretty confusing  You don t need a react-state to solve this  nor any special external lib  It can be achieved with pure css sass   The style    hover     position  relative      amp  hover  amp   no-hover       opacity  0          amp  hover  amp   hover       opacity  1          amp   hover       position  absolute      top  0      opacity  0          amp   no-hover       opacity  1          The React-Component  A simple Hover Pure-Rendering-Function   const Hover      onHover  children      gt         lt div className  hover  gt           lt div className  hover  no-hover  gt  children  lt  div gt           lt div className  hover  hover  gt  onHover  lt  div gt       lt  div gt      Usage  Then use it like this        lt Hover onHover   lt div gt  Show this on hover  lt  div gt   gt           lt div gt  Show on no hover  lt  div gt       lt  Hover gt

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

A simple `css`-only solution.

Examples related to javascript

Examples related to css

Examples related to reactjs

Examples related to mouseevent

Examples related to dom-events