css - 如何通过孩子更改父样式：LESS中的悬停动作

Question

我有这个 LESS 设置：

.wrapper {
    .parent {
       height: 100px;

       .children {
          //some style;

          &:hover {

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

我需要通过将鼠标悬停在其中的某个子元素上来更改父元素的一些高度。这段代码不起作用，那么有没有可能做到这一点？非常感谢您的帮助。

Answer 1

添加:hover到.parent而不是.childrendiv 将实现结果，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

这里的主要问题是，不幸的是，您不能从 CSS 中的子选择器（有或没有:hover）的角度以任何方式设置父级样式。在这里看到这个答案。

您只能根据父母的选择器为孩子设置样式，或者根据彼此的选择器设置兄弟姐妹的样式。

也就是说，当然有一些简单的方法可以使用 javascript/jQuery 来实现这一点，

但不是在 LESS 中，因为它的输出是 CSS，所以上述限制再次适用。

但幸运的是，孩子的一些属性会影响他们父母的一些属性……所以通过给孩子造型，你也会影响父母。如果子（块）相对位于父（块）内部，则父height应适应子的height（包括padding,margin和border），而不必对父做任何特别的事情。

演示

.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

让你的 CSS 像这样：

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

使用 jQuery：

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