Html 如何更改悬停菜单上的标题背景图像

我一直在寻找一种方法来改变我的横幅背景图像时，我悬停我的菜单栏

这是我的html

<div id="container">
    <header>
        <nav>
            <ul>
                <li>
                    <a href="index.html">home</a>
                </li>
                <li>
                    <a href="bedrijf.html">bedrijf</a>
                </li>
                <li>
                    <a href="diensten.html">diensten</a>
                </li>

                <li>
                    <a href="pictures.html">foto's</a>
                </li>
                <li><a href="contact-page.html">contacteer ons</a></li>

            </ul>
        </nav>
    </header>

所以我想做的是当我把鼠标悬停在我的一个按钮上时，标题的背景应该变成我为这个页面选择的图片

---

我希望这是可能的，它会很棒。

您可以在jQuery中这样做：

$("li > a").hover(function(){
 $("header").css("background-image", "img.jpg");
});

这段代码表示，如果您将鼠标悬停在li标记中带有a标记的元素上，那么它会将标题的背景图像更改为img.jpg

现在，如果不悬停，希望背景图像变回，请添加以下代码：

$("li > a").mouseleave(function(){
 $("header").css("background-image", "none");
});

---

当您将鼠标悬停在LI上时，可以在其上使用伪元素（

：before

）。 它有点黑，但也可以工作，而且没有javascript

在此进行工作演示：

---

我想出了一个解决办法。基本上，在每个

元素中添加一个空的、绝对定位的div，并在悬停时从标题后面向上移动它

标题{
位置：相对位置；
宽度：100%；
背景：红色；
}
ullia{
位置：相对位置；
z指数：3；
}
ulli:悬停舱{
z指数：1；
}
伊利分区{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：-1；
}

我不会说没有javascript是不可能的，但我肯定不会说这段代码很漂亮

。已修复{
位置：绝对位置；
顶部：50px；
左：0；
不透明度：0；
过渡：不透明度。5s缓进缓出；
}
李{
显示：内联块；
}
.show1:hover+#header1{
不透明度：1；
}
.show2:hover+#header2{
不透明度：1；
}
.show3:hover+#header3{
不透明度：1；
}
.show4:hover+#header4{
不透明度：1；
}

CSS中没有父选择器（一般来说）。你需要编写脚本。jQuery是否包含在您的项目中？在这种情况下，这是微不足道的。我宁愿不公平地使用jquery或javascript（用于学校项目/用于我爸爸）。那么，这真的不可能。CSS选择器可以沿着树向下，在某些情况下可以穿过树，但不能向上。我认为您应该看看一些jquery/javascript解决方案（），因为我认为仅使用CSS是不可能的。谢谢您回答我不会实现这个想法

<div id="container">
  <header>
    <nav>
      <ul>
        <li>
          <a href="index.html">home</a>
          <div style="background:green">
          </div>
        </li>
        <li>
          <a href="bedrijf.html">bedrijf</a>
          <div style="background:yellow">
          </div>
        </li>
        <li>
          <a href="diensten.html">diensten</a>
        </li>

        <li>
          <a href="pictures.html">foto's</a>
        </li>
        <li><a href="contact-page.html">contacteer ons</a></li>

      </ul>
    </nav>
  </header>

header {
  position: relative;
  width: 100%;
  background: red;
}
ul li a {
  position: relative;
  z-index: 3;
}
ul li:hover div {
  z-index: 1;
}
ul li div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}