stuff here
stuff h...">
Have Geek Brain

JQuery: select all DIVs nested under a specific DIV

I have an architecture like this:

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

I want, using jQuery, to hide the cursor when the mouse enters #container

. However, since nested divs appear on top, this is not entirely true. How to hide the mouse cursor when hovering over any of the divs in #container

. Below is the code for hiding the cursor.

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


a source to share


4 answers


Unless I say this, you can just attack both parent and child divs?

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


I haven't tested this of course, but I had to use a similar method to change the cursor <li>

with the child <label>

.

You can extend this function a bit by using the function children()

.

+4


a source


While there are several correct answers, I think this is more efficient.

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


This way you only use one event listener, per #container

.

+3


a source


Try the following:

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


a source


Use the children () selector.

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


a source






More articles:


All Articles