将鼠标悬停在子元素上时更改父元素的CSS属性

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.

Answer 1

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;
}

Answer 2

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

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

Answer 3

Try this JQuery

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

Answer 4

This is working code

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

}