jQuery: select all DIV's nested under specific DIV

Question

I have an architecture similar to this:

<div id="container">
<div>stuff here</div>
<div>stuff here</div>
<div>stuff here</div>
<div>stuff here</div>
</div>

I want to, using jQuery, hide the cursor when the mouse enters #container. However as the nested divs appear on top it doesn't quite work that way. How can I hide the mouse cursor when hovering over any of the divs within #container. Below is the cursor hiding code.

        $('#container').mouseover(function()
        {
            $(this).css({cursor: 'none'});
        });

Answer 1

Dare I say it, you could just target both parent and child divs?

$('#container, #container div').mouseover(function()
{
    $(this).css({cursor: 'none'});
});

Granted I haven't tested this, but had to use a similar method to change the cursor of a <li> with a <label> child.

You could extend this slightly using the children() function.

Answer 2

Try this:

$('#container > div').mouseover(function()
{
    $(this).css('cursor', 'none');
});

Answer 3

Use the children() selector.

$('#container').children().mouseover(function()
    {
        $(this).css({cursor: 'none'});
    });

Answer 4

Although there are several correct answer, I think this is more efficient.

$('#container').mouseover(function(){
   $(this).children().andSelf().css('cursor', 'none');
});

This way you are only using one event listener, on the #container.