Question

我有这个LESS设置：

.wrapper {
    .parent {
       height: 100px;

       .children {
          //some style;

          &:hover {

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

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

Answer 1

将:hover添加到.parent而不是.children div将获得结果，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）的角度以任何方式设置父级样式。请参阅此answer here。

根据父母的选择者或兄弟姐妹的说法，你只能根据彼此的选择对孩子进行造型。

也就是说，使用javascript / jQuery实现这一目标很简单，

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

但幸运的是儿童的某些属性会影响他们父母的某些属性......因此，通过为孩子设置样式，您也会影响父母。如果子（块）位于父级（块）内，则父级height应该适应height（包括padding，margin和{{1}孩子，你不必为父母做任何特别的事。

DEMO

border

.parent {
  width:200px;
  background:orange;
}
.child {
  background:red;
  width:100px;
  height:100px;
}
.child:hover {
  height:200px;
}

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

如何按子项更改父级样式：在LESS中悬停操作

3 个答案: