Javascript 如何在导航栏中的元素上悬停时更改整个导航栏颜色

我正在建立自己的网站，在此之前，我正在努力了解我想做什么，以及W3学校教程

当您单击“打开”时，它会正确显示覆盖图，当您将鼠标悬停在覆盖图中的文本上时，文本会更改颜色，但我希望这样，当您将鼠标悬停在文本上时，覆盖图的背景会更改为图像。它的叠加颜色是灰色的，但是当我把鼠标悬停在说“狗”的物体上时，我希望背景被狗的图片所取代

我曾尝试使用CSS:hover函数，但只能让它更改单个导航栏元素的背景色，而不能更改整个覆盖

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
  background-color: red;
 }

这只会更改navbar元素的背景色

---

这里是w3 schools tryIt站点的链接，以查看代码的其余部分。

在CSS中，您不能通过悬停子元素来更改父元素的样式。

---

您将需要Javascript

通过使用JQuery，我能够找到答案，这就是最终为我工作的代码

   <script>
     $(".about").hover(function(){
     $(this).parent().parent().css("background","red");
      });
     $(".about").mouseleave(function(){
     $(this).parent().parent().css("background","blue");
     });
   </script>

$（“.about”）.hover（函数（）{
$（this.parent（）.parent（）.css（“背景”、“红色”）；
});
$（“.about”）.mouseleave（函数（）{
$（this.parent（）.parent（）.css（“背景”、“蓝色”）；
});

所以基本上这里发生的是我有一个导航栏，其中有不同的链接，每个链接都有自己的类（例如，你可以看到这里的“about”是一个）。我让JQuery做的是，当您将鼠标悬停在特定元素上时，它会更改父属性的背景

注意，我必须执行.parent（）.parent（），因为我的设置方式，可能只需一个.parent（）即可

然后，当你将鼠标悬停在类中的元素上时，它会改变父属性的css，然后当你鼠标退出元素时，背景会回到原来的状态，所以在本例中是蓝色的

---

我希望这有助于任何人，如果他们有类似的问题

你需要JS。你对如何做到这一点有什么见解吗？