CODEWITHSUNDEEP
htmlcss
Jonas
Jonas

Reputation: 11

Change parent or ancestor element color when hovered over a link

I am working on a website where I want to change the color of the whole navigation bar when I hover over a link that is a child or descendants of that navigation bar.

.containernav {
  margin: 0;
  padding: 0;
  background-color: grey;
}
/*home*/
#home {
  color: white;
}
#home:hover {
  background-color: white;
}



/*playstation*/
#playstation {
  color: white;
}
#playstation:hover{
  background-color: blue;
}



/*xbox*/
#xbox {
  color: white;
}
#xbox:hover{
  background-color: green;
}



/*pcgaming*/
#pcgaming {
  color: white;
}
#pcgaming:hover {
  background-color: #FFBA00;
}




 nav > ul {
   list-style: none;
 }

nav > ul > li > a {
  text-decoration: none;
}
<div class="containernav" id="a">
    <nav>
      <ul>
        <li><a id="home" href="index.html">Home</a></li>
        <li><a id="playstation" href="playstation.html">Playstation</a></li>
        <li><a id="xbox" href="xbox.html">XBox</a></li>
        <li><a id="pcgaming" href="pcgaming.html">PC-Gaming</a></li>
      </ul>
    </nav>
</div>

My current implementation only changes the color of the link it self, but not the container with the css style class containernav. What need to be changed in order to change the background color of that container?

Upvotes: 1

Views: 53

Answers (2)

cnrhgn
cnrhgn

Reputation: 703

JQuery

$( document ).ready(function() {

    $("#home").hover(
    function() {
      $(".containernav").addClass("white-bg");
    }, function() {
      $(".containernav").removeClass("white-bg");
    }
  );

  $("#playstation").hover(
    function() {
      $(".containernav").addClass("blue-bg");
    }, function() {
      $(".containernav").removeClass("blue-bg");
    }
  );

 // and so on..

});

CSS

.white-bg {background-color:white;}
.blue-bg {background-color:blue;}

// and so on

Upvotes: 0

Andrey Safonov
Andrey Safonov

Reputation: 43

This is not achievable with css. There are several topics regarding this matter - some of them demands for a :parent selector, some of them saing that this will be a huge performance issue. However you can do this with javascript if this is an option for you. Here is a quick example with Jquery:

$("#child").hover(function(){
     $(this).parent().css("bakground,"red");
     //This should be ajusted according your needs
     // Can be achieved with data attribute, custom class etc..
 });

Upvotes: 1

Related Questions