Hover over an child and change the style(in this case the background) of an parent

Question

on my website there are some hexagon SVG´s with different colors and a normal .content class with some style.

What i want, is if the user :hover over the SVG the background-color of .content should get a "specific" color.

#hexagon4_work:hover .content{
    background-color: #6EC5D3;
}

#hexagon4_work:hover ~ .content{
    background-color: #6EC5D3;
}


#hexagon4_work:hover > .content{
    background-color: #6EC5D3;
}

#hexagon4_work:hover + .content{
    background-color: #6EC5D3;
}

I have already searched about it, but i do not found any solution for this. What i found was these operators. But these affect only for a child in a parent. / or not?

I´d like to only use CSS, so if it is not possible only in CSS, please tell me that too. (I am a noobie in JS so dont wonder.) :)

Thanks for all following answers. - MK

CSS cannot, under any circumstances, style an ancestor element based on an interaction with its descendant. You'll need to use JavaScript to implement this. — David says reinstate Monica, Dec 28 '15 at 16:42
Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — David says reinstate Monica, Dec 28 '15 at 16:44

Konrad Klockgether · Accepted Answer · 2015-12-29T10:08:09.947

1

There is no CSS-only solution for your Problem. Check the comment from David.

But you could do something with JavaScript. Add this to your code.

var hex4 = document.getElementById('hexagon4_work');
hex4.addEventListener('mouseover', function(){
    document.getElementsByClassName('content')[0]
        .style.backgroundColor = '#6EC5D3';
});
hex4.addEventListener('mouseout', function(){
    document.getElementsByClassName('content')[0]
        .style.backgroundColor = 'transparent';
});

I tried it on your page and it works. For the other hexagons you should copy this code and modify the selecor in first line and the color in line 4.

My recomendation: Add the CSS transition: background-color 500ms; to the content div. It would be a nice animation.

edited Dec 29 '15 at 10:08

answered Dec 28 '15 at 19:29

Konrad Klockgether

319
2
8

hahaha, thank you. And thank you for that transition tip. :) Hoooah – Mike Kaufmann Dec 29 '15 at 01:13
No problem. If you like it, vote my answer up please ;) – Konrad Klockgether Dec 29 '15 at 10:30

score 0 · Answer 2 · answered Aug 02 '17 at 19:51

While there's no way to do this directly (there are no parent selectors in CSS as of 2017), you can do it by creating a child SPAN, setting z-index and its position to push it behind everything else in the parent, and change its background color (parent background = transparent). Check this out

Hover over an child and change the style(in this case the background) of an parent

2 Answers2