How to execute a function when mouse overs a division and all its nesting elements inside?

Question

How to execute a function when mouse overs a division and all its nesting elements inside? Like

<div id="main">
      <div id="sub1">Sometext</div>
</div>
<script>
$(function() {
   $("#main").mouseover(function() {
      //This function fails to execute  if i am over #sub1
   });
});
</script>

I want to execute the mouseover function when it with over #main regardless of the children inside

Answer 1

That should work. I would check your CSS to see that sub1 is not being positioned or floated such that main fails to wrap it.

also try the jQuery mouseenter method.

Answer 2

I'd look at Moin's answer first, but if you still need to handle it with jQuery...

The following will trigger for all elements under #main including #main. I would add a check to see if the code has already been run or is running before triggering it again.

<script>
$(function() {
   $("#main, #main *").mouseover(function(e) {
       // This will trigger for all elements under #main, be careful
   });
});
</script>