CODEWITHSUNDEEP
htmlcssparent-child
phpLover
phpLover

Reputation: 155

Change css properties of parent element when hover on child element

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.

Upvotes: 0

Views: 746

Answers (4)

Bhupinder kumar
Bhupinder kumar

Reputation: 556

This is working code

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

}

Upvotes: 0

Super User
Super User

Reputation: 9642

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

Upvotes: 2

Carl Binalla
Carl Binalla

Reputation: 5401

Try this JQuery

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

Upvotes: 0

Koby Douek
Koby Douek

Reputation: 16693

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

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

Upvotes: 0

Related Questions