title: onMouseOver event not working in React
body: <p>The onMouseOver event does not seem to trigger, no matter what I try.  I can see that its bound to the  component, but nothing happens when I mouse over.  onClick works as expected.  Where am I going astray?</p>
  
  <p>The code itself is a simple image gallery constructor that calls a 'Gallery' function from react-photo-gallery.</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>class ShowGallery extends React.Component {
    constructor(props) {
      super(props);
      this.state = { currentImage: 0 };
      this.closeLightbox = this.closeLightbox.bind(this);
      this.openLightbox = this.openLightbox.bind(this);
      this.gotoNext = this.gotoNext.bind(this);
      this.gotoPrevious = this.gotoPrevious.bind(this);
      this.gotoImage = this.gotoImage.bind(this);
      this.onMouseEnterHandler = this.onMouseEnterHandler.bind(this, 'value');
      this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this, 'value');
    }
    openLightbox(event, obj) {
      this.setState({
        currentImage: obj.index,
        lightboxIsOpen: true
      });
    }
    closeLightbox() {
      this.setState({
        currentImage: 0,
        lightboxIsOpen: false
      });
    }
    gotoPrevious() {
      this.setState({
        currentImage: this.state.currentImage - 1
      });
    }
    gotoNext() {
      this.setState({
        currentImage: this.state.currentImage + 1
      });
    }
    gotoImage(event, obj) {
      this.setState({
        currentImage: obj.index
      });
    }
    onMouseEnterHandler (event, obj) {
      console.log("mouse entered")
    }
    onMouseLeaveHandler (event, obj) {
      console.log("mouse left area")
    }
    render() {
      return (
        &lt;div&gt;
          &lt;Container&gt;
            {this.props.pageData.sectionTitle === "hello" ?(&lt;SectionHeader
              title={this.props.pageData.sectionTitle}
              paragraph={this.props.pageData.blurb}
            /&gt;) : null}
  
            &lt;Col&gt;
            &lt;/Col&gt;
          &lt;/Container&gt;
          &lt;Row&gt;
            &lt;Col&gt;
              &lt;Gallery
                photos={this.props.pageData.photos}
                onClick={this.openLightbox}
                onMouseOver={() =&gt; console.log("mouse over")}
                // onMouseLeave={this.onMouseLeaveHander}
              /&gt;
              &lt;Lightbox
                images={this.props.pageData.photos}
                onClose={this.closeLightbox}
                onClickPrev={this.gotoPrevious}
                onClickNext={this.gotoNext}
                currentImage={this.state.currentImage}
                isOpen={this.state.lightboxIsOpen}
                backdropClosesModal={true}
              /&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default ShowGallery;
  
   
   </code></pre>
  </div>
  </div>
  </p>