How to send mouseover event to parent div?

Question

I have a Div in which there is a text input, like this:

<div id="parentDive" class="parent">
<input id="textbox"></input>
</div>

I have assigned a functionality to the Div mouseover event and mouseout event by means of JQuery, but when I move my mouse over the text input, it calls mouseout event while it's in the DIV.

How to solve this problem? Should I send the event to the parent? How?

Answer 1

Use the jQuery .hover() method instead of binding mouseover and mouseout:

$("#parentDive").hover(function() {
    //mouse over parent div
}, function() {
    //mouse out of parent div
});

$("#textbox").hover(function() {
    //mouse over textbox
}, function() {
    //mouse out of textbox
});

Live test case.

The .hover() is actually binding the mouseenter and mouseleave events, which are what you were looking for.