In React, onMouseEnter or hover is not working as expected

Question

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.post.code
    document.querySelector(classname).classList.add('image-hover-opacity')
}

mouseLeave() {
    console.log('mouse leave')
    const classname = '.' + this.props.post.code
    document.querySelector(classname).classList.remove('image-hover-opacity')
}

    render() {
        <img src={src} onMouseEnter={::this.mouseEnter} onMouseLeave={::this.mouseLeave} />
    }

onMouseEnter and onMouseLeave are fired when mouse enters and leaves the image, respectively, good. But the problem is when I move the mouse inside the image, both onMouseEnter and onMouseLeave are fired.

And I have tried css solution as well, when I hover on image, change the opacity property. But the problem is the same: when I move mouse inside the image, :hover and not hover are fired multiple times.

How to solve this? thanks

UPDATE There is something in my previous code. Created one jsfiddle, and it works. sorry guys

[Can't reproduce it](http://jsbin.com/panege/edit?js,console,output). But for this stuff you should usually use CSS anyways, maybe show us more code? — Fabian Schultz, Jan 30 '17 at 14:21
@prosti I have tried the css way. But when I move the mouse inside the image, the opacity toggles between 0.5 and 1 — Benjamin Li, Jan 30 '17 at 22:26

score 26 · Accepted Answer · edited Oct 14 '18 at 19:56

Using document.querySelector is not a very React way of thinking. You can try this approach:

Use a div wrapping this img to avoid this weird mouseEnter behavior

Use this.state with opacity

constructor() {
  this.state = {
    opacity: 1
  }
}

mouseEnter() {
    console.log('mouse enter')
    this.setState({opacity: 0.5})
}

mouseLeave() {
    console.log('mouse leave')
    this.setState({opacity: 1})
}

    render() {
      <div style={{opacity: this.state.opacity}}>
        <img src={src} onMouseEnter={::this.mouseEnter} onMouseLeave={::this.mouseLeave} />
      </div>
    }

prosti · Answer 2 · 2017-01-31T16:12:38.183

I really think you can achieve this in CSS only. So your component should have simple className property and that class should have the definitions for:

.image-hover-opacity:hover {
  opacity: 0.5;
}

class Example extends React.Component {
  constructor() {
    super();
    this.state = {};
  }
    

  render() {
    return(
      <img className="image-hover-opacity" src="http://i.imgur.com/PLKabDV.png" />
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

.image-hover-opacity:hover {
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

This is by far the simplest solution I've found anywhere in the internet and thusly the most effective in terms of mantainability. Thank you! — Alberto, Apr 14 '19 at 20:57

In React, onMouseEnter or hover is not working as expected

2 Answers2

Linked