ホバーのナビゲーションバーに表示される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

:hoverエフェクトを実行する前に、widthを指定する必要があるからです。

Like this

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

Answer 2

がtransition: background ease-in .5s;

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

<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>

のように、移行する必要のあるプロパティを追加します。