CSS 如何通过孩子更改父样式：LESS 中的悬停操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16672455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change parent style by child :hover action in LESS
提问by Lukas
I have this LESS setup:
我有这个 LESS 设置：
.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.
我需要通过将鼠标悬停在其中的某个子元素上来更改父元素的一些高度。这段代码不起作用，那么有没有可能做到这一点？非常感谢帮助。
回答by Duncan Beattie
Adding the :hoverto the .parentinstead of the .childrendiv will achieve the result, http://codepen.io/duncanbeattie/pen/xvDdu
添加: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;
}
}
}
回答by Martin Turjak
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.
这里的主要问题是，不幸的是，从:hoverCSS 中子选择器（有或没有）的角度来看，您不能以任何方式设置父级的样式。在这里看到这个答案。
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,
也就是说，当然有使用 javascript/jQuery 实现这一目标的简单方法，
but not in LESS, as its output is CSS, so the above limitations apply again.
但不是在 LESS 中，因为它的输出是 CSS，所以上述限制再次适用。
But fortunatelysome 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 heightshould adapt to the height(including padding, marginand border) of the child, without you having to do anything really special to the parent.
但幸运的是，孩子的一些属性会影响他们父母的一些属性……所以通过给孩子造型，你也会影响父母。如果孩子（块）相对位于父（块）内部，则父母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>回答by JoeTidee
Make your CSS like this:
让你的 CSS 像这样：
.parent.over {
/* whatever style you want when teh child is hovered over */
}
Using jQuery:
使用jQuery：
$(".children").hover(
function() {
$(this).closest(".parent").removeClass("over").addClass("over");
}, function() {
$(this).closest(".parent").removeClass("over");
}
);
