html - 将鼠标悬停在链接上时更改父元素或祖先元素的颜色

Question

我在一个网站上工作，当我将鼠标悬停在该导航栏的子链接或后代链接上时，我想更改整个导航栏的颜色。

.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>

我当前的实现仅更改链接本身的颜色，但不更改具有 css 样式类 containernav 的容器。需要更改什么才能更改该容器的背景颜色？

Answer 1

这是 css 无法实现的。关于这个问题有几个主题——其中一些要求 :parent 选择器，其中一些说这将是一个巨大的性能问题。 但是，如果这是您的选择，您可以使用 javascript 执行此操作。 这是一个使用 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..
 });