本文介绍了如何更改父级的样式< li>在悬停的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个WordPress网站(在我的localhost)使用< ul>
作为自定义菜单。如果有< ul> 时,如何悬停只更改
< li>
/ code>子菜单?
I have a WordPress site (on my localhost) that uses a <ul>
for a custom menu. How can I change the CSS of a <li>
on hover only if it has a <ul>
sub-menu?
所有主菜单项都有一个border-radius,我想删除当前项目例如:
All the main menu items have a border-radius and I want to remove this on the current item (Services, below) for example:
<div class="main-nav">
<ul class="menu" id="menu-main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul class="sub-menu">
<li><a href="#">Item One</a></li>
<li><a href="#>Item Two</a></li>
</ul>
</li>
<li><a href="#>Contact</a></li>
</ul>
</div>
我找不到CSS解决方案,我也试过jQuery:
I can't find a CSS solution and I've tried jQuery too:
$('ul.sub-menu').parent().hover(function(){
$(this).addClass('no-radius');
});
推荐答案
$('.menu li').has('ul').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
这篇关于如何更改父级的样式< li>在悬停的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!