Style parent li on child li:hover

Question

I\'ve been digging all day to find out how to style the parent li when hovering on a child li element.

e.g.

 Parent Element <         


        

Answer 1

The javascript:

<!-- add the following line only if you are not already using jQuery: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('.page_item .page_item').mouseenter(function() {
        $(this).parent().closest('.page_item').addClass('highlighted');
    }).mouseleave(function() {
        $(this).parent().closest('.page_item').removeClass('highlighted');
    });
</script>

What this does is that when the mouse enters one of the child <li> elements, this adds the highlighted class to the parent <li>. And when the mouse leaves, the class is removed. So you just have to create a highlighted class now :)

$(this).closest('.page_item') just searches for the closest parent element which matches the .page_item selector (so, the closest parent with a page_item class).

Answer 2

If you have checked that the right class is applied to the element I'm pretty sure that you just aren't specifying your styles enough. Specify as far back as you can, including the ul and li parents of the style you want to set. This is just because Wordpress uses such a long (and annoying imo) hierarchy for these styles.