将鼠标悬停在没有悬停效果的孩子身上

时间:2013-07-29 12:22:51

标签: css css3 hover

所以我有2 div他们彼此在一起,所以就像这样

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

当我将鼠标悬停在background上时,我想从.parent更改.parent

但是当我将鼠标悬停在background上时,我希望.child再次恢复正常。

例如:http://jsfiddle.net/k3Zdt/1/

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

我想保留这个<div>结构。我不想要一个JavaScript解决方案(我知道JavaScript解决方案,但我想保持它纯CSS)。

2 个答案:

答案 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的精确组合也包含在内。

  

演示:http://jsfiddle.net/gFu8h/

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;    
}