Как изменить стиль родителя <li>при наведении

Question

У меня есть сайт WordPress (на моем локальном хосте), который использует <ul> для пользовательского меню.Как я могу изменить CSS <li> при наведении только , если у него есть подменю <ul>?

Все пункты главного меню имеют радиус границы, и я хочучтобы удалить это для текущего элемента (Сервисы, ниже), например:

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

    $('ul.sub-menu').parent().hover(function(){
    $(this).addClass('no-radius');
}); 

Answer 1

$('.menu li').has('ul').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

Answer 2

$(".menu LI").hover(
    function() {
        if ($("UL", $(this)).length > 0) {
            $(this).addClass("no-radius");
        }
    },
    function() {
        $(this).removeClass("no-radius");
    }
);

Answer 3

$('ul.sub-menu').parent().hover(function(){
    $(this).parent().addClass('no-radius');
});

Вы всегда можете использовать console.debug ($ (this)), чтобы проверить, к какому элементу вы обращаетесь

Answer 4

$('li>ul.sub-menu').hover(function() {
    $(this).addClass('no-radius');
}, function() {
   $(this).removeClass('no-radius');
});

В вашем решении this относится к элементу ul, а не к его родителю.

Вместо этого этот фрагмент кода проверяет, имеет ли какой-либо li прямой дочерний элемент ul с классом = sub-menu, а затем применяет нужный класс к элементу li.

Надеюсь, это поможет,

Ура!

Answer 5

Помогает ли это:

$("li").hover(function(){
if($(this).parent().hasClass("sub-menu") {
 $(this).css("color", "red");
}
});