如何更改父级的样式< li>在悬停 [英] How to Change Style of Parent <li> on Hover

问题描述

我有一个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>在悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！