How can I access a hover state in reactjs

Question

I have a sidenav with a bunch of basketball teams  So I would like to display something different for each team when one of them is being hovered over  Also  I am using Reactjs so if I could have a variable that I could pass to another component that would be awesome

User · Answer

For having hover effect you can simply try this code

import React from "react";
  import "./styles.css";

    export default function App() {

      function MouseOver(event) {
        event.target.style.background = 'red';
      }
      function MouseOut(event){
        event.target.style.background="";
      }
      return (
        <div className="App">
          <button onMouseOver={MouseOver} onMouseOut={MouseOut}>Hover over me!</button>
        </div>
      );
    }

Or if you want to handle this situation using useState() hook then you can try this piece of code

import React from "react";
import "./styles.css";


export default function App() {
   let [over,setOver]=React.useState(false);

   let buttonstyle={
    backgroundColor:''
  }

  if(over){
    buttonstyle.backgroundColor="green";
  }
  else{
    buttonstyle.backgroundColor='';
  }

  return (
    <div className="App">
      <button style={buttonstyle}
      onMouseOver={()=>setOver(true)} 
      onMouseOut={()=>setOver(false)}
      >Hover over me!</button>
    </div>
  );
}

Both of the above code will work for hover effect but first procedure is easier to write and understand

User · Answer

ReactJs defines the following synthetic events for mouse events    onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp   As you can see there is no hover event  because browsers do not  define a hover event natively    You will want to add handlers for onMouseEnter and onMouseLeave for hover behavior   ReactJS Docs - Events

User · Answer

I know the accepted answer is great but for anyone who is looking for a hover like feel you can use setTimeout on mouseover and save the handle in a map  of let s say list ids to setTimeout Handle   On mouseover clear the handle from setTimeout and delete it from the map  onMouseOver       gt  this onMouseOver someId   onMouseOut       gt  this onMouseOut someId    And implement the map as follows   onMouseOver listId  string      this setState              whatever          const handle   setTimeout      gt        scrollPreviewToComponentId listId        1000      Replace 1000ms with any time you feel is good enough for your hover action   this hoverHandleMap listId    handle     onMouseOut listId  string      this setState              whatever          const handle   this hoverHandleMap listId     clearTimeout handle     delete this hoverHandleMap listId       And the map is like so   hoverHandleMap     listId  string   NodeJS Timeout           I prefer onMouseOver and onMouseOut because it also applies to all the children in the HTMLElement  If this is not required you may use onMouseEnter and onMouseLeave respectively

User · Answer

React components expose all the standard Javascript mouse events in their top-level interface   Of course  you can still use  hover in your CSS  and that may be adequate for some of your needs  but for the more advanced behaviors triggered by a hover you ll need to use the Javascript  So to manage hover interactions  you ll want to use onMouseEnter and onMouseLeave   You then attach them to handlers in your component like so   lt ReactComponent     onMouseEnter       gt  this someHandler      onMouseLeave       gt  this someOtherHandler    gt   You ll then use some combination of state props to pass changed state or properties down to your child React components

[hover] How can I access a hover state in reactjs?

Examples related to hover

Examples related to reactjs