I have two nested <div>
's
<div class="parent">
<div class="child"></div>
</div>
I want to change the background
from .parent
when I hover over .parent
.
I want the background
to turn normal again when I hover over .child
.
For example, when I hover over the inner area I want the outer area to return to its original (gray) state:
.parent {
width: 100px;
height: 100px;
padding: 50px;
background: lightgray;
}
.parent:hover {
background: lightblue;
}
.child {
height: 100px;
width: 100px;
background: darkgray;
}
.child:hover {
background: lightblue;
}
<div class="parent">
<div class="child"></div>
</div>
I would like to keep this <div>
structure and I do not want a JavaScript solution (I know the JavaScript solution but I want to keep it pure CSS).
This is not a duplicate of "how to style the parent when hovering over a child". I want to NOT style the parent when hovering over a child.
EDIT 2024: It's now possible with the newly added has
selector https://developer.mozilla.org/en-US/docs/Web/CSS/:has
https://stackoverflow.com/a/78110861/270209
Old Answer:
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>