hover on child without hover effect on parent [duplicate]

Question

So I have 2 div's they're in each other so like this

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

and I want to change the background from .parent when I hover over .parent.

but I want the background to turn normal again when I hover over .child.

so for example: (or http://jsfiddle.net/k3Zdt/1/ )

.parent {      transition:background-color 1s;      width:100px;      height:100px;      background:#3D6AA2;      padding:50px;  }    .parent:hover {      background:#FFF;  }    .child {      height:100px;      width:100px;      background:#355E95;      transition:background-color 1s;  }    .child:hover {      background:#000;  }

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

When I hover over the darkblue area I want the not-so-darkblue area to stay not-so-darkblue instead of changing to white.

I would like to keep this <div> structure. and I dont want a JavaScript solution (I know the JavaScript solution but I want to keep it pure CSS).

Answer 1

Basically you can't : How to style the parent element when hovering a child element?

But a trick is to use a sibling element : http://jsfiddle.net/k3Zdt/8/

.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>

Answer 2

You can trick something ;)

Basically, use a :before pseudo-element for the child div, with its same size;

when you hover on the child div, enlarge the :before pseudo-element to cover the father div area; this will cause the father div hover effect to fall down, and then to come back to the original state. A precise combination of z-index is involved too.

Demo: http://jsfiddle.net/gFu8h/ ^{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;      }

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