Vurgulu hareket eden gezinme çubuğunda görünen CSS resmi garip davranıyor mu?

Question

Aşağıda, şu anda yaşadığınız sorunun bir görüntüsünü görüyorsunuz. Listelerdeki bazı sınıflarım var ve üzerine geldiğimde, arka plan görüntüsü belirli bir resme dönüşecek. Temel olarak onun oyunculuğu, kaybolduğunda gerçekten garip, bir şekilde problemin içinde solma yerine kutunun içine girer. Görüntünün kaybolmasını istiyorum, aşağıda gördüğünüz resimde olduğu gibi atlamayın. Neyse, işte benim kodudur, yardım için şimdiden teşekkürler:

#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

etkisini gerçekleştirmeden önce width belirtmeniz gerekir.

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>

gibi, geçiş gereken özellik ekleyin