CODEWITHSUNDEEP
jquerychildren
Pluda
Pluda

Reputation: 1477

jquery element on hover if CHILD has class, CHILD do something

I need to find a way of just show the children of hovered li.

I've this

$('.menu.horizontal li').hover(function(event) {
                        if(event.currentTarget === this) {
                            $(this).addClass('hover');
                            if($(this).hasClass('pai') && $(this).hasClass('hover')) {
                                $(this).find('.nivel_1').css('display', 'block');
                                $(this).find('li nivel_1').css('display', 'block');
                            } else {
                                $('li nivel_1').css('display', 'none');
                                $('.nivel_1').css('display', 'none');
                                $(this).removeClass('hover');
                            }
                        }
                    });

my element on hover does check for the class 'pai' and shows the .nivel_1, but if I've more .nivel_1 they are all showed... so I need to just show hovered element children. How do I do this?

Thanks

Upvotes: 0

Views: 2089

Answers (2)

Clive
Clive

Reputation: 36956

if(event.currentTarget === this) {
    if($(this).hasClass('pai')) {
        $(this).find('> .nivel_1').css('display', 'block');

        // This line doesn't actually make sense so I've commented it out
        //$(this).find('li nivel_1').css('display', 'block');
    }
}

Assuming that this code is being run in the mouseover part of the hover event.

Upvotes: 1

a'r
a'r

Reputation: 36999

Use the hover() jQuery function to add a class to the <li> when the user hovers. And then you can use css to show/hide the child elements.

$('li').hover(
    function() { $(this).addClass('hover'); },
    function() { $(this).removeClass('hover'); }
);

And then use the following CSS:

li *       { display: none; }
li.hover * { display: block; }

Upvotes: 1

Related Questions