title: In React, onMouseEnter or hover is not working as expected
body: <p>I have one image with <code>opacity = 1</code> at the beginning.</p>
  
  <p>When mouse enters the image, change <code>opacity = 0.5</code>. When mouse leaves the image, change the opacity back.</p>
  
  <p>here is one code:</p>
  
  <pre><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() {
          &lt;img src={src} onMouseEnter={::this.mouseEnter} onMouseLeave={::this.mouseLeave} /&gt;
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>How to solve this? thanks</p>
  
  <hr>
  
  <p><strong>UPDATE</strong>
  There is something in my previous code. Created one <a href="https://jsfiddle.net/BENLI522/69z2wepo/68737/" rel="noreferrer">jsfiddle</a>, and it works.
  sorry guys</p>