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

Question

我正在建立自己的网站，在此之前，我正在努力了解我想要做什么，并遵循 W3 Schools 教程。

当您单击打开时，它会正确显示叠加层，当您将鼠标悬停在叠加层中的文本上时，文本会改变颜色，但我想做到这一点，以便当您将鼠标悬停在文本上时，叠加层的背景对图像的更改。就目前而言，覆盖颜色为灰色，但当我将鼠标悬停在“狗”字样上时，我希望将背景替换为狗的图片。

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

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

这只会改变导航栏元素的背景颜色。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push

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

Answer 1

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