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).
<div>
structure" I don't want to do weird positioning with CSS. tbh.