How can I access a hover state in reactjs?

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

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

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={() => this.onMouseOver(someId)} onMouseOut={() => this.onMouseOut(someId) 

And implement the map as follows:

onMouseOver(listId: string) { this.setState({ ... // whatever }); const handle = setTimeout(() => { 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.

This won't work for OP because they wanted a variable but for those who just want a UI hover effect it's usually easier to stick with CSS.

Below example will reveal a delete button when an item is hovered over:

<div className="revealer"> <div> {itemName} </div> <div className="hidden"> <Btn label="Delete"/> </div> </div> .hidden { display: none; } .revealer:hover .hidden { display: block; } 

Parent div has revealer class. When it's hovered over, it'll reveal the hidden div. Hidden div must be nested inside revealer div.

Using useState,

import React, { useState } from "react"; function App() { const [ishover,sethover]=useState(false); function MouseOver() { sethover(true); } function MouseOut() { sethover(false); } return ( <div> <button style={{backgroundColor: ishover?"black":null}} onMouseOver={MouseOver} onMouseOut={MouseOut} onClick={handleClick} > Submit </button> </div> ); } export default App; 

You can implement your own component logics using those events which stolli and BentOnCoding suggested above, or use the module named react-hover

if I could have a variable that I could pass to another component that would be awesome.

then you can simply wrap another component

 <ReactHover options={optionsCursorTrueWithMargin}> <Trigger type="trigger"> <TriggerComponent /> </Trigger> <Hover type="hover"> <HoverComponent /> </Hover> </ReactHover> 

or your plain HTML:

<ReactHover options={optionsCursorTrueWithMargin}> <Trigger type="trigger"> <h1 style={{ background: '#abbcf1', width: '200px' }}> Hover on me </h1> </Trigger> <Hover type="hover"> <h1> I am hover HTML </h1> </Hover> </ReactHover> 

demo code here: demo

If you are using React and Material-ui, you can inject css with the sx Props:

const HoverTable = () => { return ( <Box sx={{ '&:hover .hoverChild': { opacity: 1 } }}> <Grid container> <Grid item xs={3}> Column1 </Grid> <Grid item xs={3}> <Box className="hoverChild" sx={{ opacity: 0 }}> <Button variant="contained">Button</Button> </Box> </Grid> </Grid> </Box> ) } export default HoverTable 

When hovering over the link, the img element will appear

function Link({ text, url, blank }) { const [hover, setHover] = useState(false) return ( <a className="inline" href={url} target={blank ? "_blank" : "_self"} onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)}> {text}{hover ? <img className="w-5 inline" src={Arrow} alt="arrow" /> : ""} </a> ) } 

You can try to implement below code. Hover functionality can be acheived with Tooltip. Please refer below code and link for clarity https://mui.com/material-ui/react-tooltip/

import * as React from 'react'; import DeleteIcon from '@mui/icons-material/Delete'; import IconButton from '@mui/material/IconButton'; import Tooltip from '@mui/material/Tooltip'; export default function BasicTooltip() { return ( <Tooltip title="Delete"> <IconButton> <DeleteIcon /> </IconButton> </Tooltip> ); }