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.
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.
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.
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;
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With