因此，这确实很丑陋，但是（确实）有效。我基本上是在创建父母的副本作为孩子的兄弟姐妹。默认情况下，parent-
overwrite是隐藏的，然后显示在child的悬停上。除非您使用+选择器而不是〜选择器，否则Chrome不会喜欢它。这不是很可扩展，但是可能有效。
正如其他人所说的那样，javascript可能是一个更好的解决方案。
<style> .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; } .parent:hover { background-color: green; } .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; } .child:hover { background-color: blue; } .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; } .child:hover ~ .parent-overwrite { display: block; }</style><div > <div >Child</div> <div ></div></div>
