ReactJS—mouseOut firing on hover of child element?

Question

I've got a div with moueOver and mouseOut functions. Why is the mouseOut firing when I hover over one of the children? This is in a list so I need to use e.target vs. hard coding the '.thumb-overlay'. It's also tweaking the backgrounds of the h2 and h4 inside and I don't quite understand. Here is a FIDDLE.

<div className="thumb-overlay"
 onMouseOver={this.mouseOver.bind(this)}
 onMouseOut={this.mouseOut.bind(this)}>
 <h2>SOME H2 TAG</h2>  
 <h4>SOME H4 TAG</h4>
</div>

Answer 1

You can use e.currentTarget instead of e.target. e.currentTarget always refers to the element the event handler has been attached to as opposed to e.target

mouseOver(e) {
    $(e.currentTarget).css('background', 'red');
}
mouseOut(e) {
    $(e.currentTarget).css('background', 'gray');
} 

jsfiddle