Give style to parent element when child element is hovered

Question

i have a ul(parent) inside which another ul is there. I have given style to the child ul using the following code when hovering on the parent ul

ul:hover>ul{

}

This gives style to the child ul when hovering on the parent ul. Now I want to give style to the parent ul when hovering on the child ul?

Is there any posible way?

You cannot do that using the current css techniques. But css4 will have the parent selectors. As of now we might be able to help you if you tell us your exact requirement. — Arun Aravind, Oct 08 '13 at 09:03
possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Pete, Oct 08 '13 at 09:03
use jquery $( "your child tag" ).focus(function() { $( this ).parent().css( "your css style" ); }); — jayadevkv, Oct 08 '13 at 09:03

score 1 · Answer 1 · answered Oct 08 '13 at 09:18

1

As of now, there is nothing like that in CSS. The spec for CSS4 Selectors does include the subject selector, which would allow you to solve this problem like that:

!ul > li:hover { ... }

For now you'll have to use Javascript if you can't avoid this problem.

A jQuery way to do it:

$('ul').on({
    mouseenter: function() {
        $(this).parent('ul').addClass('ishovered');
    },
    mouseleave: function() {
        $(this).parent('ul').removeClass('ishovered');
    }
});

With that you could use the .ishovered class to style your parent list via CSS.

answered Oct 08 '13 at 09:18

MildlySerious

8,750
3
28
30

Thanks! You're not wrong at all and your solution is fine. Your answer just lacks the explanation on *why* this solution is required. – MildlySerious Oct 08 '13 at 09:25
thanks but I think I should not took -1. anyway I deleted my answer cause a person gave me a down vote without reason. – Sina R. Oct 08 '13 at 09:26
Well the opinion of one person doesn't make or break your answer. You weren't wrong after all. – MildlySerious Oct 08 '13 at 09:28
you are right but I don't want to get downvotes. and I undelete it again. thanks anyway. – Sina R. Oct 08 '13 at 09:29

Give style to parent element when child element is hovered

1 Answers1