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学校tryIt网站的链接，以查看其余代码。

Answer 1

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

Answer 2

通过使用JQuery，我能够弄清楚这一点，这是最终为我工作的代码。

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

因此，基本上，这里发生的事情是我有一个导航栏，其中有不同的链接，每个链接都有自己的类（例如，如您所见，“关于”是一个）。而JQuery的作用是，当您将鼠标悬停在特定元素上时，它将更改父属性的背景。

请注意，由于我的设置方式，我不得不执行.parent（）。parent（），可能只用一个.parent（）即可。

然后，当您将鼠标悬停在类中的元素上时，会发生变化，它将更改parent属性的css，然后当您将鼠标退出该元素时，背景将返回到原来的状态。蓝色。

我希望这对任何有类似问题的人都有帮助！

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

2 个答案: