How to disable mouseout events triggered by child elements?

Question

Let me describe the problem in details:

I want to show an absolute positioned div when hovering over an element. That's really simple with jQuery and works just fine. But when the mouse goes over one of the child elements, it triggers the mouseout event of the containing div. How do I keep javascript from triggering the mouseout event of the containing element when hovering a child element.

What's the best and shortest way to do that with jQuery?

Here is a simplified example to illustrate what I mean:

Html:

<a>Hover Me</a> <div>   <input>Test</input>   <select>     <option>Option 1</option>     <option>Option 2</option>   </select> </div> 

Javascript/jQuery:

$('a').hover( function() { $(this).next().show() }               function() { $(this).next().hide() } ); 

Answer 1

The question is a bit old, but I ran into this the other day.

The simplest way to do this with recent versions of jQuery is to use the mouseenter and mouseleave events rather than mouseover and mouseout.

You can test the behavior quickly with:

$(".myClass").on( {    'mouseenter':function() { console.log("enter"); },    'mouseleave':function() { console.log("leave"); } }); 

Answer 2

For simplicity sake, I would just reorganize the html a bit to put the newly displayed content inside the element that the mouseover event is bound to:

<div id="hoverable">   <a>Hover Me</a>   <div style="display:none;">     <input>Test</input>     <select>       <option>Option 1</option>       <option>Option 2</option>     </select>   </div> </div> 

Then, you could do something like this:

$('#hoverable').hover( function() { $(this).find("div").show(); },                        function() { $(this).find("div").hide(); } ); 

---

Note: I don't recommend inline css, but it was done to make the example easier to digest.