Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have this LESS setup:

.wrapper {
    .parent {
       height: 100px;

       .children {
          //some style;

          &:hover {

              .parent & {
                 height: 150px;
              }
          }
       }
    }
}

I need to change some height for parent element by hover on some child inside of it. This code is not working, so is there any possible to do this? Much thx for help.

like image 214
Lukas Avatar asked May 21 '13 14:05

Lukas


People also ask

How do I choose parent to child in CSS?

There is currently no way to select the parent of an element in CSS in a way that works across all browsers. That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation.

How do you specify children in CSS?

The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.


1 Answers

Adding the :hover to the .parent instead of the .children div will achieve 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;
        }
    }
}
like image 170
Duncan Beattie Avatar answered Nov 16 '22 01:11

Duncan Beattie