title: Prevent onmouseout from firing on child elements
body: <p>Given the following:</p>
  
  <pre><code>render() {
  
    const onMouseOver = (event) =&gt; {
      this.setState({ isHovering: true });
    };
  
    const onMouseOut = (event) =&gt; {
      this.setState({ isHovering: false });
    };
  
    const open = this.state.isHovering ? true : false;
  
    return (
      &lt;Nav className={styles.TopNav} bsStyle="pills" activeKey={1}&gt;
        &lt;NavDropdown
          className={dropDownClasses}
          eventKey={1}
          open={open}
          title="Cards"
          id="nav-dropdown"
          onMouseEnter={onMouseOver}
          onMouseOut={onMouseOut}&gt;
          &lt;MenuItem eventKey="1.1"&gt;Action&lt;/MenuItem&gt;
          &lt;MenuItem eventKey="1.2"&gt;Another action&lt;/MenuItem&gt;
        &lt;/NavDropdown&gt;
        &lt;NavItem className={styles.navLink} eventKey={2}&gt;Blog&lt;/NavItem&gt;
      &lt;/Nav&gt;
    );
  </code></pre>
  
  <p>How do I prevent onMouseOut firing when the mouse is over a child of NavDropdown.</p>
  
  <p>Can I detect if I am over a child in onMouseOut? </p>