Question

I have the following menu structure (created by WordPress, so can’t change the IDs/Classes) and I’d like to use JS to change the background of #header-nav li ul.children li a when #header-nav li ul.children li ul.children li a:hover is active.

Can anybody help me with the syntax?

<div id="header-nav">
    <li class="page_item page-item-10"><a>Marketing</a>
        <ul class='children'>
            <li class="page_item page-item-153"><a href="{link}">The Marketing Team</a></li>
            <li class="page_item page-item-148"><a href="{link}">Ideas</a></li>
            <li class="page_item page-item-136"><a href="{link}">Referrals</a></li>
            <li class="page_item page-item-156"><a href="{link}">Partnerships</a></li>
        </ul>
    </li>
</div>

So far I’m thinking that If I can get the class of the parent of the element that is being hovered over (I.e. ‘page_item page-item-10’ if the user hovers over ‘Ideas’) then I can set the background using the .hover() function. Not sure how to get that parent class though?

/**
 * Highlighs parent elements in a menu when a child is being hovered over
 */
$(function(){

    $('#header-nav li ul.children li ul.children li a').hover(function(e){

        /** Get the parent of the element that is being hovered over */
        var parent = ???;

        /** Set the background of the parent element on 'mouseenter' */
        $('#header-nav li ul.children li.'+parent+' a').css('background-color', '#0066B5');

    }, function(){

        /** Reset the background of all matching elelments of 'mouseleave' */
        $('#header-nav li ul.children li a').css('background-color', '#000');

    })
});

Answer 1

I think this is what you need:

$(function(){    
    $('#header-nav li ul.children li ul.children li a').hover(function(e){      
        $(this).parent().css('background-color', '#0066B5');

    }, function(){
        /** Reset the background of all matching elelments of 'mouseleave' */
        $('#header-nav li ul.children li').css('background-color', '#000');

    })
});