Html CSS图像出现在导航栏上的悬停行为怪异？

下面是我目前遇到的问题的图片。我在列表中有一些类，在悬停状态下，我使它们的背景图像变为特定的图像。基本上，当它消失的时候，它的行为真的很奇怪，在某种程度上，它跳进盒子里而不是消失，这就是问题所在。我希望图像淡入，而不是像下面的图像那样跳入。无论如何，这是我的代码，提前感谢您的帮助：

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

添加需要转换的属性，如

转换：后台易用.5s


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











这是因为在执行
：悬停
效果之前，必须指定它们的
宽度


这样看起来很酷，我想这是因为你把
transition
设置为'all'。尝试将其更改为
transition:background color.5s
以限制仅转换为背景色。感谢您解决了我的问题，难以置信它如此简单=）
#NavBar .olie, #NavBar .hjem, #NavBar .naturgas, #NavBar .kul { 
  background-size: 30px;
}