Css 在子对象上悬停，而在父对象上没有悬停效果

所以我有两个div，它们彼此在一起，就像这样

<div class="parent">
    <div class="child"></div>
</div>

基本上你不能：

但有一个技巧是使用同级元素：

.parent{
宽度：100px；
高度：100px；
填充：50px；
}
.孩子{
高度：100px；
宽度：100px；
背景#355E95；
过渡：背景色1s；
位置：相对位置；
顶部：-200px；
}
.孩子：悬停{
背景：#000；
}
.兄弟姐妹{
位置：相对位置；
宽度：100px；
高度：100px；
填充：50px；
顶部：-50px；
左：-50px；
背景#3D6AA2；
过渡：背景色1s；
}
.兄弟姐妹：悬停{
背景：#FFF；
}

你可以欺骗某些东西；）

基本上，为子div使用

：before

伪元素，其大小相同

将鼠标悬停在子div上时，放大

：before

伪元素以覆盖父div区域；这将导致父div

悬停

效果下降，然后返回到原始状态。还涉及到z指数的精确组合

演示：黑暗魔法（tm）

.parent{
宽度：100px；
高度：100px；
填充：50px；
过渡：背景色1s；
背景#3D6AA2；
位置：相对位置；
z指数：1；
}
.家长：悬停{
背景：#FFF；
}
.孩子{
高度：100px；
宽度：100px；
背景#355E95；
过渡：背景色1s；
位置：相对位置；
}
.child:悬停{
背景：#000；
}
.孩子：以前{
内容：''；
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
z指数：-1；
过渡：背景色1s；
}
.child:悬停：在{
顶部：-50px；
底部：-50px；
左：-50px；
右：-50px；
背景#3D6AA2；
}

将div并排放置，并使用定位将其视为父子元素。不要相信使用CSS可以保持相同的HTML结构。。。在子对象上悬停将始终触发父对象的悬停。你必须使用一个不同的结构，或者用另一种方式伪造它。在这个例子中，这不是一个问题，但我认为这对于更复杂的设置来说是一个问题。“我想保持这个

结构”我不想用CSS做奇怪的定位。tbh。@robooneus我想它也不会，但也许有什么我还不知道的。这是。谢谢：）这就是它。这是我最后的结果：）+1酷。。我没想过谢谢这只是一个概念证明，如果需要的话，它应该调整得更动态，更正确地处理悬停（它只在离开父亲时恢复状态（父亲也不再是父亲了，因为它是透明的

：before

放大）），但至少。。。使用纯CSS是可能的：）