悬停时出现在导航栏上的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 .hjem:hover {
  background-color: #111;
}
#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: 45px;
  background-repeat: no-repeat;
  background-position: center;
}
#NavBar .naturgas:hover {
  background-color: #111;
  background-image: url("billeder/naturgas_navbar.png");
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center;
}

<div id="NavBar">
  <ul>
    <li><a class="hjem" 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>

Answer 1

添加需要转换的属性，例如transition: background ease-in .5s;

＆＃13;

＆＃13;

#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: background ease-in .5s;
  -ms-transition: background ease-in .5s;
  -moz-transition: background ease-in .5s;
  -webkit-transition: background ease-in .5s;
  transition: background ease-in .5s;
}
#NavBar .hjem:hover {
  background-color: #111;
}
#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: 45px;
  background-repeat: no-repeat;
  background-position: center;
}
#NavBar .naturgas:hover {
  background-color: #111;
  background-image: url("billeder/naturgas_navbar.png");
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center;
}

＆＃13;

<div id="NavBar">
  <ul>
    <li><a class="hjem" 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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是因为您必须在执行width效果之前指定他们的:hover。

Like this

#NavBar .olie, #NavBar .hjem, #NavBar .naturgas, #NavBar .kul { 
  background-size: 30px;
}