Html CSS使特定的图像出现在特定的导航栏上

我需要这样做，如果我有一个导航栏，上面有家、石油、煤炭和天然气，当我在石油上悬停时，它会使那个盒子的背景图像变成油滴或其他东西，如果我在煤炭上悬停，它会在那个特定的盒子里有煤炭的背景图像

这是到目前为止我的代码，但无论我将鼠标悬停在什么位置，它当前都显示相同的图像（油）：

#导航栏ul{
边框左上半径：6px；
边框左下半径：6px；
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
#李国宝{
宽度：100px；
浮动：左；
}
#纳瓦巴利阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
-o-转变：.5s；
-ms转换：.5s；
-moz转变：.5s；
-webkit转换：.5s；
过渡：.5s；
}
#导航栏a：悬停{
背景色：#111；
背景图片：url（“billeder/olie_navbar.png”）；
背景尺寸：30px；
背景重复：无重复；
背景位置：中心；
}

您需要为导航中的每个项目创建一个ID或类，如下所示：

<div id="NavBar">
  <ul>
    <li><a href="index.html">Hjem</a>
    </li>
    <li><a class="olie" href="olie.html">Olie</a>
    </li>
    <li><a class="kul" href="kul.html">Kul</a>
    </li>
    <li><a class="naturgas" href="naturgas.html">Naturgas</a>
    </li>
  </ul>
</div>

---

这样，每个

a

标记可以具有不同的悬停状态

您应该为每个a元素指定自己的id。然后根据其id为每个id指定背景图像

#Hjem:悬停{
背景图片：url（“Hjem.png”）；
}
#奥利：悬停{
背景图片：url（“Olie.png”）；
}
#库尔：悬停{
背景图片：url（“Kul.png”）；
}
#纳图加斯：悬停{
背景图片：url（“Naturgas.png”）；
}
#纳瓦尔{
边框左上半径：6px；
边框左下半径：6px；
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
#李国宝{
宽度：100px；
浮动：左；
}
#纳瓦巴利阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
-o-转变：.5s；
-ms转换：.5s；
-moz转变：.5s；
-webkit转换：.5s；
过渡：.5s；
}
#导航栏a：悬停{
背景色：#111；
背景尺寸：30px；
背景重复：无重复；
背景位置：中心；
}

因此您的标记实际上不允许对单个标记进行任何特定的定位，-基本上您的css针对每个列表项，而不是特定的列表项

我对你的代码做了一些修改， -向每个li标记添加了一个类 -为每个类添加了css选择器

希望你能看到从这里到哪里

li.hjem a:悬停{
背景图片：url（“bilder/hjem_navbar.png”）；
背景尺寸：30px；
背景重复：无重复；
背景位置：中心；
}
李奥莉：停下来{
背景图片：url（“billeder/olie_navbar.png”）；
背景尺寸：30px；
背景重复：无重复；
背景位置：中心；
}
李库尔：停下来{
背景图片：url（“bilder/kul_navbar.png”）；
背景尺寸：30px；
背景重复：无重复；
背景位置：中心；
}
李。纳图加斯a：悬停{
背景图片：url（“billeder/Naturgas_navbar.png”）；
背景尺寸：30px；
背景重复：无重复；
背景位置：中心；
}

为每个导航按钮创建一个id，并在css中分别执行。所以我应该像

这样做吗？或者它应该如何正确编码才能工作？是的，现在做同样的事情，但是使用id-s，而不是css中的标签。

#NavBar olie:hover {
  background-color: #111;
  background-image: url("billeder/olie_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}


#NavBar kul:hover {
  background-color: #111;
  background-image: url("billeder/kul_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}


#NavBar naturgas:hover {
  background-color: #111;
  background-image: url("billeder/naturgas_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}