javascript - WordPress:悬停不起作用时尝试显示子菜单

Question

当 about 页面悬停在 wordpress 导航中时，我试图显示 .sub-menu。好像不行。

我不确定问题出在我的 JQuery 还是我的 CSS。我需要更改什么才能使子菜单在悬停时显示？

WordPress 呈现的 HTML

 <div class="menu-primary-menu-links-container">
    <ul id="menu-primary-menu-links" class="menu">
        <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-21 current_page_item menu-item-167"><a href="http://localhost/wordpress/">Home</a></li>
        <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-165"><a href="http://localhost/wordpress/about/">About</a>

            <ul class="sub-menu">
                <li id="menu-item-180" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-180"><a href="http://localhost/wordpress/our-team/">Our Team</a></li>
                <li id="menu-item-179" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-179"><a href="http://localhost/wordpress/our-mission/">Our Mission</a></li>
                <li id="menu-item-178" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-178"><a href="http://localhost/wordpress/members-data-bank/">Members Data Bank</a></li>
            </ul>
        </li>
        <li id="menu-item-170" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-170"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
        <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166"><a href="http://localhost/wordpress/blog/">Blog</a></li>
        <li id="menu-item-164" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164"><a href="http://localhost/wordpress/contact/">Contact</a></li>
    </ul>
</div>

CSS

.show-sub-menu-pages {
    display: flex !important;
    flex-direction: column !important;  
    }

 .sub-menu {
    display: none !important;
    padding: 0;
    z-index: 999;
    background-color: red !important;
        position: absolute;
    right:220px;
    top: 60px;

}

JQuery

$('#menu-item-165').hover(
       function(){ $(this).addClass('show-sub-menu-pages') }
 )

Answer 1

你会不会忘记了末尾的分号？

$('#menu-item-165').hover(function(){ 
    $(this).addClass('show-sub-menu-pages');
});

如果不行，你也可以试试鼠标悬停功能...

$('#menu-item-165').mouseover(function(){ 
    $(this).addClass('show-sub-menu-pages');
});

此外，除非有充分的理由，否则我会删除重要内容，它们可能会干扰，例如:

.sub-menu {
   display: none;
   padding: 0;
   z-index: 999;
   background-color: red;
   position: absolute;
   right:220px;
   top: 60px;
}