将鼠标悬停在孩子身上，而对父母没有悬停效果

一尘不染

将鼠标悬停在孩子身上，而对父母没有悬停效果

css

所以我有2个div，彼此一样，像这样

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

我想改变background的.parent时候我悬停.parent。

但是我希望background悬停时再次恢复正常.child。

当我将鼠标悬停在深蓝色区域上时，我希望不是那么深蓝色的区域保持不是那么深蓝色，而不是变成白色。

我想保持这种<div>结构。而且我不想要JavaScript解决方案（我知道JavaScript解决方案，但我想保留纯CSS）。

阅读 221

2020-05-16

共1个答案

一尘不染

.parent {

  width: 100px;

  height: 100px;

  padding: 50px;

}



.child {

  height: 100px;

  width: 100px;

  background: #355E95;

  transition: background-color 1s;

  position: relative;

  top: -200px;

}



.child:hover {

  background: #000;

}



.sibling {

  position: relative;

  width: 100px;

  height: 100px;

  padding: 50px;

  top: -50px;

  left: -50px;

  background: #3D6AA2;

  transition: background-color 1s;

}



.sibling:hover {

  background: #FFF;

}


<div class="parent">

    <div class="sibling"></div>

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

</div>

2020-05-16