CODEWITHSUNDEEP
javascriptreactjs
Kirk Ross
Kirk Ross

Reputation: 7163

ReactJS—mouseOut firing on hover of child element?

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>

Upvotes: 1

Views: 1597

Answers (1)

QoP
QoP

Reputation: 28397

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

Upvotes: 2

Related Questions