Подсветка родительского элемента при наведении на дочерний элемент

Question

Подсветка родительского элемента при наведении на дочерний элемент

0

У меня есть меню с 2 подменю. Используя jQuery, я хочу, чтобы элемент hightlight зависел. Я не могу решить, как выдать ярлык родительского элемента, когда курсор находится на дочернем элементе. Для зависания я использовал класс caled active:

.vertical-active {
background:#0F6;
}

Функция JQuery выглядит так:

$(document).ready(function (e) {
$('.submenu a').hover(

function () {
    $(this).addClass('vertical-active');
    $(this).parent('vertical-links a').addClass('vertical-active');
    },

    function () {
        $(this).removeClass('vertical-active');
        $(this).parent('vertical-links a').removeClass('vertical-active');
    });
});

Проблема в родительском селекторе, но я не знаю, как выбрать подменю родительского элемента.

JSFiddle ссылка: http://jsfiddle.net/6g9tZ/4/

Ivan Pandžić 20 март 2014, в 14:54

Источник

0

что именно вы хотите выделить ?? Должно ли это быть ul с submenu класса
Milind Anantwar 20 март 2014, в 13:10

Теги:

javascript

jquery

css

3 ответа

6

$(document).ready(function() {
    $('.submenu a').on('mouseenter mouseleave', function() {
        $(this).add($(this).closest('ul').closest('li').children('a')).toggleClass('vertical-active');
    });
});

FIDDLE

РЕДАКТИРОВАТЬ:

чтобы подчеркнуть родителя, вы бы сделали

$('.vertical-links > li > a').on('mouseenter mouseleave', function() {
    $(this).toggleClass('vertical-active')
});

FIDDLE

adeneo 20 март 2014, в 10:44

0

Можете ли вы добавить код для выделения родительского элемента при наведении?
Ivan Pandžić 20 март 2014, в 13:20
0

@ ИванПанджич - добавлено!
adeneo 20 март 2014, в 13:28

0

Замените соответствующие части кода следующим образом:

$(this).parents('li:eq(1)').find("> a").addClass('vertical-active');
....
$(this).parents('li:eq(1)').find("> a").removeClass('vertical-active');

Одна проблема с вашим кодом заключается в том, что вы искали "родительский <a> ", но такой вещи нет; <a> является дочерним элементом вашего родителя. Итак, здесь мы ищем родительский <li>, а не непосредственный, но фактически бабушка и дедушка, находим его прямой дочерний <a> и выделяем его.

Кроме того, у вас есть parent('vertical-links') который должен быть parent('.vertical-links') (а не точкой: его классом не является элемент).

Nikos Paraskevopoulos 20 март 2014, в 10:49

Ещё вопросы

что именно вы хотите выделить ?? Должно ли это быть ul с submenu класса
Можете ли вы добавить код для выделения родительского элемента при наведении?

Gaurang Tandon · Accepted Answer · 2014-03-20T10-28-00.000Z

Используйте .siblings в дополнение к .closest.

FIDDLE

$(document).ready(function (e) {
    $(".vertical-links > li > a").on("mouseenter mouseleave", function(){
        $(this).toggleClass('vertical-active');
    });    

    $('.submenu a').on("mouseenter mouseleave",function () {
        $(this).toggleClass('vertical-active');
        $(this).closest("ul").siblings("a").toggleClass('vertical-active');
    });    
});

Можете ли вы добавить код для выделения родительского элемента при наведении?