[英]WordPress: Trying to Display sub-menu when hover not working
I am trying to show the .sub-menu
when about
page is hovered in the wordpress navigation. 我正在尝试在wordpress导航中将
about
页面悬停时显示.sub-menu
。 It doesn't seem to work. 它似乎不起作用。
I'm not sure if the problem is with my JQuery or my CSS. 我不确定问题出在我的JQuery还是CSS。 What do I need to change to make the sub-menu appear on hover?
我需要更改什么才能使子菜单显示在悬停上?
WordPress Rendered HTML 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 的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 jQuery查询
$('#menu-item-165').hover(
function(){ $(this).addClass('show-sub-menu-pages') }
)
Might you be forgetting the semicolons at the end? 您可能会忘记最后的分号吗?
$('#menu-item-165').hover(function(){
$(this).addClass('show-sub-menu-pages');
});
If not, you can also try a mouseover function... 如果没有,您也可以尝试将鼠标悬停功能...
$('#menu-item-165').mouseover(function(){
$(this).addClass('show-sub-menu-pages');
});
Also, I'd remove the importants unless there's a good reason, they may interfere, example: 另外,除非有充分的理由,否则我将删除重要信息,例如它们可能会干扰您的工作:
.sub-menu {
display: none;
padding: 0;
z-index: 999;
background-color: red;
position: absolute;
right:220px;
top: 60px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.