css划过显示父级元素,当悬停子元素时，如何设置父元素的样式？

SMILET

这个问题以前问过很多次，简单的典型答案是：它不能用纯CSS来完成。名字里写着：级联样式表只支持层叠方向的造型，而不是向上。但在大多数希望产生这种效果的情况下，例如在给定的例子中，仍然有可能利用这些级联特性来达到预期的效果。考虑一下这个伪标记：

    诀窍是给兄弟姐妹与父级相同的大小和位置，并给出兄弟姐妹的样式而不是父的样式。这看起来像是父母的风格！现在，兄弟姐妹的风格如何？当孩子徘徊时，父母也是，但兄弟姐妹不是。兄弟姐妹也是如此。这包括三个可能的CSS选择器路径，用于设计兄弟姐妹：parent sibling { }parent sibling:hover { }parent:hover sibling { }这些不同的路径允许一些不错的可能性。例如，对问题中的示例使用此技巧会导致这把小提琴:div {position: relative}div:hover {background: salmon}div p:hover {background: white}div p {padding-bottom: 26px}div button {position: absolute; bottom: 0}显然，在大多数情况下，这一技巧取决于使用绝对定位来给兄弟姐妹与父级相同的大小，并且仍然允许孩子出现在父级中。有时，为了选择特定的元素，必须使用更限定的选择器路径，如这把小提琴它在一个树菜单中多次实现这个技巧。真的很不错。