.parent {
background-color: #cde;
width: 100%;
position: relative;
height: 100px;
}
.parent:hover {
background-color: black;
}
.child {
float: right;
position: absolute;
left: 50%;
top: 50%;
padding: 10px;
background-color: #ff0000;
}
.child:hover {
background-color: yellow;
}<div class="parent">
<span class="child">
Click
</span>
</div>一个技巧是在悬停时使用子元素创建另一个图层来模拟父背景的不变。
这是一个示例box-shadow（在子项悬停时，更改父容器的背景颜色（仅限 CSS））
.parent {
background-color: #cde;
width: 100%;
height: 100px;
position: relative;
overflow:hidden;
}
.parent:hover {
background-color: black;
}
.child {
position: absolute;
left: 50%;
top: 50%;
padding: 10px;
background-color: #ff0000;
}
.child:hover {
background-color: yellow;
box-shadow:0 0 0 1000px #cde;
}<div class="parent">
<span class="child">
Click
</span>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句