How to change parent style with child: hover action in LESS

Question

I have this LESS setting:

.wrapper { .parent { height: 100px; .children { //some style; &:hover { .parent & { height: 150px; } } } } } 

I need to change some height for the parent element by hovering over some child element inside it. This code does not work, so how can this be done? Thanks a lot for the help.

Answer 1

Addendum :hover in .parent instead of .children div will produce the result, http://codepen.io/duncanbeattie/pen/xvDdu

 .wrapper { .parent { pointer-events:none; height: 100px; background:#000; .children { //some style; height:20px; background:#f00; pointer-events:all; } &:hover { height:150px; } } } 

Answer 2

The main problem is that , unfortunately, you cannot style the parent element in any way from the point of view of the child selector (with or without :hover ) in CSS. See here for the answer here .

You can only stylize children according to the selectors of your parents or siblings according to the choices of others.

However, there are, of course, easy ways to achieve this with javascript / jQuery.

but not in LESS, since its output is CSS, so the above limitations apply again.

But fortunately, some properties of children affect some properties of their parents ... therefore, by placing children, you will also affect the parent. If the child element (block) is relative to the parent (block), the height parents must adapt to the height (including padding , margin and border ) of the child, without having to do something really special for the parent.

Demo

 .parent { width:200px; background:orange; } .child { background:red; width:100px; height:100px; } .child:hover { height:200px; } 

 <div class="parent"> <div class="child"></div> </div> 

Answer 3

Make your CSS as follows:

 .parent.over { /* whatever style you want when teh child is hovered over */ } 

Using jQuery:

 $(".children").hover( function() { $(this).closest(".parent").removeClass("over").addClass("over"); }, function() { $(this).closest(".parent").removeClass("over"); } );