How can I access a hover state in reactjs?

hover reactjs
Username picture Username · Aug 20, 2015 · Viewed 92.6k times · Source

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.

Answer

stolli picture stolli · Aug 20, 2015

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:

<ReactComponent
    onMouseEnter={() => this.someHandler}
    onMouseLeave={() => this.someOtherHandler}
/>

You'll then use some combination of state/props to pass changed state or properties down to your child React components.

Related questions

In React, onMouseEnter or hover is not working as expected

I have one image with opacity = 1 at the beginning. When mouse enters the image, change opacity = 0.5. When mouse leaves the image, change the opacity back. here is one code: mouseEnter() { console.log('mouse enter') const classname = '.' + this.props.…

Read More
How to disable the hover effect of material-ui button inside of a styled component

I added the css hover property to disable the button's hover effect, but it seems not work for my case, how should I fix this? import Button from 'material-ui/Button' import styled from 'styled-components' const StyledButton = styled(Button)` &:hover { …

Read More
React event onMouseLeave not triggered when moving cursor fast

Im trying to implement hover event but onMouseLeave is not always triggering when leaving element especially when moving cursor over elements fast. I tried i Chrome, Firefox and Internet Explorer but in every browser same problem appeared. My code: import …

Read More