Change css properties of parent element when hover on child element

Question

I am trying to change properties of parent element when hover on child element. Here is my HTML

<div class="social-icons">          
    <div class = "innerSocialDiv">
        <a href="#" target="_blank" class="fa fa-facebook fa-lg" title="facebook"></a>
    </div>
</div>

I need to change a CSS property of innerSocialDiv when hovering on fa-facebook.

Here is what I did in my CSS:

.fa-facebook:hover  + .innerSocialDiv{
    background-color: black;
}

But it's not working.

Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Mohammad Usman, Mar 21 '17 at 05:30

score 2 · Answer 1 · answered Mar 21 '17 at 05:29

2

CSS always work left to right and top to bottom way. When you hover a child element then it's parent automatically called hover state.
Instead of this you can directly use following CSS

.innerSocialDiv:hover {
    background-color: black;
}

answered Mar 21 '17 at 05:29

Super User

9,448
3
31
47

score 0 · Answer 2 · answered Mar 21 '17 at 05:27

0

You don't need the + .innerSocialDiv, you can just use:

.fa-facebook:hover {
    background-color: black;
}

answered Mar 21 '17 at 05:27

Koby Douek

16,156
19
74
103

@Carl Jan : I know how how to achieve this using JQuery, but I need to done this using CSS only – phpLover Mar 21 '17 at 05:30

score 0 · Answer 3 · answered Mar 21 '17 at 05:28

0

Try this JQuery

$(".fa.fa-facebook").hover(function(){
    $(".innerSocialDiv").css("background-color", "black");
});

answered Mar 21 '17 at 05:28

Carl Binalla

5,393
5
27
46

score 0 · Answer 4 · answered Mar 21 '17 at 05:29

0

This is working code

.fa-facebook:hover .innerSocialDiv{
background-color: black;

}

answered Mar 21 '17 at 05:29

Bhupinder kumar

558
1
5
19

1

can you send me fiddle – Bhupinder kumar Mar 21 '17 at 05:36

Change css properties of parent element when hover on child element

4 Answers4

This is working code