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

Question

我正在尝试在将鼠标元素悬停时更改父元素的属性。这是我的HTML

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

我需要在innerSocialDiv上悬停时更改fa-facebook的CSS属性。

以下是我在CSS中所做的事情：

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

但它不起作用。

Answer 1

CSS始终以left to right和top to bottom的方式运作。当您将一个子元素悬停时，它的父元素会自动调用悬停状态。
而不是这个，你可以直接使用以下CSS

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

Answer 2

您不需要+ .innerSocialDiv，您可以使用：

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

Answer 3

试试这个JQuery

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

Answer 4

这是正常工作的代码

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

}