Style parent li when hovering child li

Question

I've been reading this thread: Style parent li on child li:hover and trying to get it to work with my menu in this fiddle: http://jsfiddle.net/PJMyR/1/, but it keeps throwing syntax errors at me, and I can't figure out why.

Here is the code:

$('li.parent ul li').mouseenter(function() {
    $(this).parent().closest('li.parent').addClass('highlighted');
}).mouseleave(function() {
    $(this).parent().closest('li.parent').removeClass('highlighted');
});

Best regards Martin

If you get "Uncaught ReferenceError: $ is not defined ": You forgot to add jQuery. — Gerald Schneider, Jul 04 '14 at 09:57
What errors are you getting? seems to be working ok in chrome. — Harry, Jul 04 '14 at 09:58
You have to include jquery library and push all your code in $(document).ready(function(){}); — pareshm, Jul 04 '14 at 09:59

Sudharsan S · Answer 1 · 2014-07-04T10:24:10.663

0

It works fine . Use .toggleClass for make your code simpler

$(function() {

    $('li.parent ul li').hover(function() {

        $(this).closest('li.parent').toggleClass('highlighted');

      });
});

DEMO

edited Jul 04 '14 at 10:24

answered Jul 04 '14 at 10:00

Sudharsan S

15,336
3
31
49

You could also remove the `.parent()` bit – putvande Jul 04 '14 at 10:22

Style parent li when hovering child li

1 Answers1