web-dev-qa-db-fra.com

survoler l'enfant sans effet de survol sur le parent

J'ai donc 2 div ils sont l'un dans l'autre donc comme ça

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

et je veux changer le background de .parent quand je survole .parent.

mais je veux que le background redevienne normal lorsque je survole .child.

ainsi par exemple: http://jsfiddle.net/k3Zdt/1/

Lorsque je survole la zone bleu foncé, je veux que la zone pas si sombre ne reste pas si sombre au lieu de passer au blanc.

Je voudrais garder ce <div> structure. et je ne veux pas d'une solution JavaScript (je connais la solution JavaScript mais je veux la garder pure CSS).

csscss3hover
27
EaterOfCode

Fondamentalement, vous ne pouvez pas: Comment styliser l'élément parent lors du survol d'un élément enfant?

Mais une astuce consiste à utiliser un élément frère: http://jsfiddle.net/k3Zdt/8/

<div class="parent">
     <div class="sibling"></div>
     <div class="child"></div>
</div>
13
luxcem

Vous pouvez tromper quelque chose;)

Fondamentalement, utilisez un :before pseudo-élément pour le div enfant, de même taille;

lorsque vous passez la souris sur le div enfant, agrandissez le :before pseudo-élément pour couvrir la zone du père div; cela provoquera la chute de l'effet père div hover, puis reviendra à l'état d'origine. Une combinaison précise de z-index est également impliquée.

Démo: http://jsfiddle.net/gFu8h/

[~ # ~] css [~ # ~]  Magie noire (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;    
}
10
Andrea Ligios