Hover on child should turn off hover effect on parent

Question

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.

keep the divs side by side and use positioning to look them as parent-child elements. — Mr_Green, Jul 29 '13 at 12:25
Don't believe you can with CSS and keep the same HTML structure... hovering on a child will always trigger the hover of the parent. You would have to use a different structure or fake it in another way. With the example it isn't a problem, but I assume it is a problem for a more complex setup. — robooneus, Jul 29 '13 at 12:26
"I would like to keep this `
` structure" I don't want to do weird positioning with CSS. tbh. — EaterOfCode, Jul 29 '13 at 12:27
@robooneus I thought it also wouldn't but maybe there is something I don't know of, yet. — EaterOfCode, Jul 29 '13 at 12:28
Here is the [Fiddle](http://jsfiddle.net/venkateshwar/k3Zdt/7/). — Mr_Green, Jul 29 '13 at 12:28
@Mr_Green I can't put them next to each other. that's the whole problem — EaterOfCode, Jul 29 '13 at 12:29
I believe there is no appropriate pseudo selector in pure CSS, not even CSS3. What you'd need is something like `:directhover`... — UweB, Jul 29 '13 at 12:30

score 29 · Accepted Answer · edited Nov 04 '19 at 15:18

29

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>

edited Nov 04 '19 at 15:18

Gleb Kemarsky

10,160
7
43
68

answered Jul 29 '13 at 12:35

luxcem

1,807
22
37

3

Thank you :) this is exactly it. this is my final sort of result :) http://jsfiddle.net/k3Zdt/11/ – EaterOfCode Jul 29 '13 at 12:46
That's a simple example. but do you have any solution for randomly sized content on child div? – Matt Rose Jun 07 '23 at 09:08

score 14 · Answer 2 · edited Nov 04 '19 at 15:22

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>

Thanks; this is only a proof-of-concept, it should be adjusted to be more dynamic and to handle the hover-out more properly, if needed (it restores the state only when going out of the father too (that is not the father anymore, because it is the transparent `:before` enlarged)), but at least... it is possible with pure CSS :) — Andrea Ligios, Jul 29 '13 at 13:34

Hover on child should turn off hover effect on parent

2 Answers2

Linked

Related