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 fin

Answer 1

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:

  Hover Me
  

    Test
    
      Option 1
      Option 2
    
  

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.