Выбор родителя ребенка в CSS - PullRequest
1 голос
/ 24 февраля 2012

С помощью приведенного ниже кода я хочу иметь возможность применить стиль CSS к родительскому элементу li class="parent" в списке.Но только когда пользователь наводит курсор на дочерние элементы li class="child" для этого конкретного родителя.

Насколько я понимаю, это невозможно сделать только с помощью CSS, но кто-нибудь знает о потенциальном решении Javascript (в идеалеиспользуя jQuery, так как мы уже используем эту библиотеку на нашем сайте)

Спасибо!

<ul>
    <li class="parent"><a href="URL" >Main Link</a>
         <ul class="sub-menu">
             <li class="child"><a href="URL" >Link</a></li>
         </ul>
    </li>
</ul>

Ответы [ 5 ]

2 голосов
/ 24 февраля 2012

Вы можете сделать что-то вроде этого:

$('li.child').hover(function() {
   $(this).closest('.parent').addClass('red');
}, function() {
   $(this).closest('.parent').removeClass('red');    
});

Рабочий пример:

2 голосов
/ 24 февраля 2012

Вы слышали правильно - CSS не позволяет перемещаться вверх по дереву DOM, только вниз. Например, вы можете выбирать детей, но не родителей.

Вот один из способов сделать это с помощью jQuery:

$("li.child").on("hover", function(){
    $(this)
        .closest("li.parent")
        .css({
            // styling here
        });
});

Мы выбираем элемент li с классом child. Мы связываем с ним событие hover и запускаем функцию, когда это событие происходит. Функция находит ближайшего родителя дочернего элемента li с классом parent, и мы меняем его CSS.

Подробнее о on() здесь , closest() здесь и css() здесь .

Также имейте в виду, что для более ранних версий jQuery вы можете использовать bind() или delegate().

РЕДАКТИРОВАТЬ: Чтобы изменить его при наведении мыши и mouseout:

$("li.child").on("mouseover mouseout", function(){
    $(this)
        .closest("li.parent")
        .toggleClass("myClass");
});

И что вы здесь делаете, это определяете класс myClass в вашем CSS. toggleClass добавляет класс, если он еще не существует в элементе, и удаляет его в противном случае. Это говорит само за себя. Таким образом, вы экономите несколько байтов и используете более предпочтительный и рекомендуемый jQuery.

0 голосов
/ 24 февраля 2012
$("li.child").hover(function () {
    $(this).parents('li.parent').addClass('parentHoverClass');
    //Alternatively, you could apply inline styles to the <li> like this:
    //$(this).parents('li.parent').css({
    //  'display': 'block',
    //  'color': '#FF00FF',
    //  'text-decoration': 'underline'
    //});
}, function () {
    $(this).parents('li.parent').removeClass('parentHoverClass');
    //Or, you could reset inline styles to the <li> like this:
    //$(this).parents('li.parent').css({
    //  'display': 'inline',
    //  'color': '#00FF00',
    //  'text-decoration': 'none'
    //});
});
0 голосов
/ 24 февраля 2012

Примерно так должно работать:

//The hover method takes two functions, one it does on mouseover
//and the other executes on mouseout
​$(".child").hover(
    function(){//get the parent -> then get its parent (the li)
        $(this).parent().parent().addClass("parent");//add the class to it
    },
    function(){//this executes on mouseout
        $(this).parent().parent().removeClass("parent");
    }//remove the class..
);​

Вы можете использовать класс .parent в качестве маркера и использовать селектор класса jquery , или вы можете использовать множество других селекторов , чтобы добраться до этого родителя.

См. Демонстрацию: http://jsfiddle.net/D8zTE/1/

0 голосов
/ 24 февраля 2012

используйте jquery hover для этого.

$(".child").hover(function(){
$(".parent").css() //check the jquery css api for the styling options
})
...