Selecting Parent of a Child in CSS

问题

With the following code below I want to be able to apply a CSS style to the parent li class="parent" item in the list. But only when the user is hovering over the child li class="child" items for that particular parent.

It's my understanding that this won't be possible using just CSS, but does anyone know of a potential Javascript solution (ideally using jQuery, as we're already using this library on our website)

Thanks!

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

回答1:

You heard right—CSS doesn't allow you to traverse upward on the DOM tree, only downward. As in, you can select children, but not parents.

Here's one method to do it with jQuery:

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

What we do is select the li element with the class child. We bind the hover event to it and fire a function when that event occurs. The function finds the closest parent of the child li with the class parent, and we change its CSS.

More on on() here, closest() here, and css() here.

Also keep in mind that for earlier versions of jQuery, you can use bind() or delegate().

EDIT: To have it change on mouseover and mouseout:

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

And what you do here is define the class myClass in your CSS. toggleClass adds the class if it doesn't already exist on the element and removes it otherwise. It's self explanatory. This way, you save a few bytes and use more preferred and recommended jQuery.

回答2:

You can do something like this:

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

Working example:

http://jsfiddle.net/HHRQD/

回答3:

Something like this should work:

//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..
);

You could use the .parent class as a marker and use jquery's class selector or you could use a variety of other selectors to get to that parent.

See demo : http://jsfiddle.net/D8zTE/1/

回答4:

$("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'
    //});
});

回答5:

use the jquery hover for this.

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

来源：https://stackoverflow.com/questions/9425133/selecting-parent-of-a-child-in-css

标签

jquery

html

css

parent