title: Hover event does not target children
body: <p>I have a simple navbar and when a user hovers over a <code>&lt;li&gt;</code> tag it must turn red. When the user removes their cursor it must turn grey. It works but not properly. Inside <code>&lt;li&gt;</code> tags I have <code>&lt;Link&gt;</code> provided by <code>react-router-dom</code> and when I target <code>&lt;li&gt;</code> tag it works properly but when I target <code>&lt;Link&gt;</code> it does not work on parent tag (<code>&lt;li&gt;</code>). </p>
  
  <p>Here is my code:</p>
  
  <p>Navbar.js:</p>
  
  <pre><code>  return(
      &lt;nav className={this.props.navClass}&gt;
        &lt;ul&gt;
          &lt;li
            className="main"
            style={{transitionDuration: "0.9s"}}
            onMouseEnter={this.props.mouseEnter}
            onMouseLeave={this.props.mouseLeave}
          &gt;
            &lt;Link to="/"&gt;მთავარი&lt;/Link&gt;
          &lt;/li&gt;
          &lt;li
            className="aboutUs"
          &gt;
            &lt;Link
              to="/about-us"
              onMouseEnter={this.props.mouseEnter}
              onMouseLeave={this.props.mouseLeave}
            &gt;ჩვენს შესახებ&lt;/Link&gt;&lt;/li&gt;
          &lt;li
            className="contactUs"
            onMouseEnter={this.props.mouseEnter}
            onMouseLeave={this.props.mouseLeave}
          &gt;
            &lt;Link to="/contact"&gt;დაგვეკონტაქტე&lt;/Link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    )
  </code></pre>
  
  <p>Main.js:</p>
  
  <pre><code>  hover(e) {
      e.preventDefault();
      e.target.style.backgroundColor = 'red'
    }
  
    mouseLeave(e) {
      e.target.style.backgroundColor = 'grey'
    }
  
    render() {
      return(
        &lt;div className="wrapper"&gt;
          &lt;div className="navBar"&gt;
            &lt;Navbar
              navClass="navbar"
              mouseEnter={this.hover.bind(this)}
              mouseLeave={this.mouseLeave.bind(this)}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  </code></pre>
  
  <p>How can I fix it? </p>
  
  <p>By the way, I will be glad if you tell me if I am breaking UI in different components correctly.</p>
  
  <p>Thank you!</p>