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.

回答1:

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

回答2:

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>

回答3:

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

来源：https://stackoverflow.com/questions/16672455/how-to-change-parent-style-by-child-hover-action-in-less

标签

css

hover

less

parent-child

parent