onMouseOver event not working in React

javascript reactjs onmouseover
Jared Gilpin picture Jared Gilpin · Jul 25, 2018 · Viewed 11k times · Source

The onMouseOver event does not seem to trigger, no matter what I try. I can see that its bound to the component, but nothing happens when I mouse over. onClick works as expected. Where am I going astray?

The code itself is a simple image gallery constructor that calls a 'Gallery' function from react-photo-gallery.

Answer

Anshul Bansal picture Anshul Bansal · Jul 25, 2018

You need to attach hover event on the wrapper div. The external Gallery componet might not be handling the hover event passed as prop.

handleHover = () => {
  console.log("mouse over");
}
<div onMouseOver={this.handleHover}>
          <Gallery
              photos={this.props.pageData.photos}
              onClick={this.openLightbox}
              // onMouseLeave={this.onMouseLeaveHander}
            />
</div>

Related questions

Change image on hover in JSX

How do I change an image on hover in JSX I'm trying something like this: <img src={require('../../../common/assets/network-inactive.png')} onMouseOver={this.src = require('../../../common/assets/network.png')} onMouseOut={this.src = require('../../../common/assets/…

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More
"SyntaxError: Unexpected token < in JSON at position 0"

In a React app component which handles Facebook-like content feeds, I am running into an error: Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0 I ran into a similar error which turned out to be a …

Read More