html控制子元素位置,html – 当悬停子元素时如何设置父元素的样式？

好了，这个问题被问过很多次，简短的典型答案是：它不能由纯CSS。它在名称中：级联样式表只支持沿级联方向的样式，而不支持样式。

但是在希望具有这种效果的大多数情况下，如在给定的示例中，仍然有可能使用这些级联特性来达到期望的效果。考虑这个伪标记：

诀窍是给同胞相同的大小和位置作为父和样式的兄弟而不是父。这将看起来像父样式！

现在，如何风格的兄弟姐妹？

当孩子徘徊时，父母也是，但兄弟姐妹不是。同样的兄弟姐妹。最后，在三个可能的CSS选择器路径为样式的兄弟：

parent sibling { }

parent sibling:hover { }

parent:hover sibling { }

这些不同的路径允许一些很好的可能性。例如，释放这个技巧在问题的示例中导致this fiddle：

div {position: relative}

div:hover {background: salmon}

div p:hover {background: white}

div p {padding-bottom: 26px}

div button {position: absolute; bottom: 0}

显然，在大多数情况下，这个技巧取决于绝对定位的使用，以使兄弟节点的大小与父节点相同，并且仍然让子节点出现在父节点中。

有时，为了选择一个特定的元素，有必要使用一个更合格的选择器路径，如this fiddle所示，它在树形菜单中多次实现该技巧。真的很好。