title: onMouseLeave triggers when entering Element
body: <p>I'm trying to simulate a hover event in React. 
  So I am using <code>onMouseEnter</code> and <code>onMouseLeave</code>
  that triggers the statechange. </p>
  
  <p>Unfortunately when I first enter the Element with the mouse both methods are triggered... </p>
  
  <p>When I leave the Element only onMouseLeave<code>is triggered.
  Does anyone knows why the method</code>onMouseLeave` is triggered on entering the element. </p>
  
  <p><strong>Here is my Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   handleOver(event){
          event.preventDefault();
          console.log('enter');
          if(this.state.open === false){
              this.setState({
                  open: true,
                  anchorEl: event.currentTarget,
              });
          }
      }
      
      handleLeave(event){
           event.preventDefault();
           console.log('leave');
           if(this.state.open === true){
               this.setState({open: false})
           }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                    &lt;img
                          onMouseEnter={this.handleOver}
                          onMouseLeave={this.handleLeave}
                          src={InfoIcon}
                      /&gt;
                      
                      &lt;Popover
                          open={this.state.open}
                          anchorEl={this.state.anchorEl}
                          anchorOrigin={{horizontal: 'right', vertical: 'top'}}
                          targetOrigin={{horizontal: 'left', vertical: 'top'}}
                          onRequestClose={this.handleLeave}
                          muiTheme={darkBaseTheme}
                      /&gt;</code></pre>
  </div>
  </div>
  </p>