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

Question

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.

score 14 · Accepted Answer · answered May 21 '13 at 14:50

14

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

answered May 21 '13 at 14:50

Duncan Beattie

2,306
17
17

1

+1 for the brilliant solution! However, it is good to note that `pointer-events` on html elements are sortoff still experimental in CSS3 and will not work in [IE and Opera](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Browser_compatibility). – Martin Turjak May 21 '13 at 18:02
1

Indeed, pointer events are not an option if IE is needed. However, I haven taken some liberties with one of the many fiddles @Martin put together and, with the use of a float, some overflow and a margin it may serve your purposes - http://jsfiddle.net/duncan/XvVfB/5/ – Duncan Beattie May 21 '13 at 23:01
@DuncanBeattie, a good one =) Of corse you can feel free to use and improve my fiddles, as long as we manage to help djlukas777 to find a solution =) Now I think we almost exhausted all cases, of how to use a child's properties to push the parent into the right shape. lol ^_^ – Martin Turjak May 21 '13 at 23:12
yeah less, sass...nothing works but pure logic – Vipertecpro May 20 '23 at 22:30

score 3 · Answer 2 · edited May 23 '17 at 10:34

3

The main problem here is that unfortunately you can NOT style the parent in any way from the perspective of a child's selector (with or without :hover) in CSS. See this answer here.

You can only style children according to their parents' selectors or siblings according to each-other's selectors.

That said, there are of course easy ways to achieve this with javascript/jQuery,

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

But fortunately some properties of children influence some properties of their parents ... so by styling children, you will affect the parent also. If the child (block) is positioned relatively inside a parent (block), the parents height should adapt to the height (including padding, margin and border) of the child, without you having to do anything really special to 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>

edited May 23 '17 at 10:34

Community

1
1

answered May 21 '13 at 16:42

Martin Turjak

20,896
5
56
76

thx for your answer and demo but i need to leave original height of child element... BR – Lukas May 21 '13 at 21:15
well then ... the jQuery solution that I am talking about in my answer, could be a good bet. Here is a [jsfiddle example](http://jsfiddle.net/XvVfB/1/). Hope this helps! Best ^_^ – Martin Turjak May 21 '13 at 21:27
oh yes and in LESS you could in this case add `&-hover {height:150px;}` inside your `.parent` rule, to account for the additional class. – Martin Turjak May 21 '13 at 21:34
nice but now i need to use JS, and this is a case where it would be unnecessary to, but thx again – Lukas May 21 '13 at 21:35
OK, no JS then. What about wrapping another container around the children, that expands on `:hover`, but doesn't change the child, [like this](http://jsfiddle.net/XvVfB/2/)? Or using an adjacent element and `+` in the selector, [like this](http://jsfiddle.net/XvVfB/4/)? According to the explanation in my answer these both could just work the way you want ^_^ – Martin Turjak May 21 '13 at 21:53
but answer by Duncan is correct to, and i will prefer it, but it's not working on IE :( i'm confused – Lukas May 21 '13 at 22:15
you are correct, unfortunately Duncan's solution will not work in IE and Opera. – Martin Turjak May 21 '13 at 22:24
Although, `pointer-events` are supported in webkit so presumably Opera wont be an issue much longer (I'm assuming Opera users are fairly fast at upgrading, as I've never actually met one) – Duncan Beattie May 21 '13 at 23:07
hehe, I share your experience @DuncanBeattie, I am not sure I know any Opera users either and most people I know also try/manage to keep their IE use secret =D But I wish the support for pointer-events would be wider, as I think your solution is otherwise very elegant. btw, thanx for the +1, if I suspect right that it was your fault ;-) – Martin Turjak May 21 '13 at 23:18

score 0 · Answer 3 · answered May 17 '16 at 23:44

Make your CSS like this:

.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");
    }
);

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

3 Answers3

Linked