html - CSS 使特定的图像出现在特定的导航栏悬停上

Question

我需要做到这一点，如果我有一个包含“家”、“石油”、“煤炭”和“天然气”的导航栏，当我将鼠标悬停在石油上时，它会使该框的背景图像变成一个油滴或其他东西，如果我将鼠标悬停在煤炭上，该特定框中将显示煤炭的背景图片。

到目前为止，这是我的代码，但无论我将鼠标悬停在什么地方，它目前都显示相同的图像(油):

#NavBar ul {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
#NavBar li {
  width: 100px;
  float: left;
}
#NavBar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}
#NavBar a:hover {
  background-color: #111;
  background-image: url("billeder/olie_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}

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

Answer 1

您需要为导航中的每个元素创建一个 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>

然后相应地分配一个background-image:

#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;
}

这样每个a标签都可以有不同的悬停状态