javascript - 悬停样式

Question

我有以下菜单结构(由 Wordpress 创建，因此无法更改 ID/类)，我想使用 JS 更改 #header-nav li ul.children li a 的背景 当 #header-nav li ul.children li ul.children li a:hover 处于事件状态时。

谁能帮我解决语法问题？

<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>

到目前为止，我在想，如果我能得到悬停在上面的元素的父类(即，如果用户悬停在“想法”上，则为“page_item page-item-10”)，那么我可以设置使用 .hover() 函数的背景。不确定如何获取该父类？

/**
 * 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

我想这就是你需要的:

$(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');

    })
});