所以我有2 div
他们彼此在一起,所以就像这样
<div class="parent">
<div class="child"></div>
</div>
当我将鼠标悬停在background
上时,我想从.parent
更改.parent
。
但是当我将鼠标悬停在background
上时,我希望.child
再次恢复正常。
例如:http://jsfiddle.net/k3Zdt/1/
当我将鼠标悬停在深蓝色区域时,我希望不那么深蓝色的区域保持不那么深蓝色,而不是变为白色。
我想保留这个<div>
结构。我不想要一个JavaScript解决方案(我知道JavaScript解决方案,但我想保持它纯CSS)。
答案 0 :(得分:12)
基本上你不能:How to style the parent element when hovering a child element?
但一个技巧是使用兄弟元素: http://jsfiddle.net/k3Zdt/8/
<div class="parent">
<div class="sibling"></div>
<div class="child"></div>
</div>
答案 1 :(得分:9)
你可以欺骗一些东西;)
基本上,对子div使用:before
伪元素,其大小相同;
当您将鼠标悬停在子div上时,将:before
伪元素放大以覆盖父div区域;这将导致父div hover
效果下降,然后再回到原始状态。 z-index的精确组合也包含在内。
CSS Dark Magic(tm)
.parent {
width:100px;
height:100px;
padding:50px;
transition:background-color 1s;
background:#3D6AA2;
position: relative;
z-index: 1;
}
.parent:hover{
background:#FFF;
}
.child {
height:100px;
width:100px;
background:#355E95;
transition:background-color 1s;
position: relative;
}
.child:hover {
background:#000;
}
.child:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
transition:background-color 1s;
}
.child:hover:before{
top: -50px;
bottom: -50px;
left: -50px;
right: -50px;
background:#3D6AA2;
}