.png als Hintergrundbilder auf der Navigationsleiste

Question

Ich bin sehr neu in HTML und CSS und dies ist kein Projekt, sondern ich entdecke Dinge auf eigene Faust. Ich versuche, eine Navigationsleiste mit Listen (ul, li) zu erstellen und wollte ein Suchsymbol und Benutzer anmelden Symbol zusammen mit dem anderen Text in der Navigationsleiste. Das ist mein HTML:

<div class="nav"> 
    <ul> 
     <div class="navBarIcons"> 
      <li class="searchIco"><a href="">search</a></li> 
      <li class="userIco"><a href="">user</a></li> 
     </div> 
     <li><a href="">OVERCLOCKING</a></li> 
     <li><a href="">PERIPHERALS</a></li> 
     <li><a href="">STORAGE</a></li> 
     <li><a href="">POWER SUPPLY</a></li> 
     <li><a href="">GRAPHIC CARDS</a></li> 
     <li><a href="">MEMORY</a></li> 
     <li><a href="">MOTHERBOARDS</a></li> 
     <li><a href="index.html">PROCESSOR</a></li> 
    </ul> 
</div> 

und das ist mein CSS:

.userIco {  
    background-image: url(userIco.png);  
    background-repeat: no-repeat;  
    background-size: 25px;  
    background-position: center;  
} 

.searchIco {  
    background-image: url(searchIco.png);  
    background-repeat: no-repeat;  
    background-size: 25px;  
    background-position: center;  
} 

.nav li a:hover {  
    background-color: #195ca1;   
    color: #f2f2f2;   
} 

Was ich tun möchte, ist auf die Symbole zu schweben und es wäre immer noch da sein (wie Sie in der sehen Bildschirm Kappe verschwindet es, wenn ich schweben)

wenn ich den Text zu entfernen es werden wont richtig ausgerichtet und wenn ich es schweben nicht den ganzen Block des bac nicht decken kground

Answer 1

Ihre background-image wird in das <li> Element, aber Ihre background-color ist auf Ihre <a>, so dass es auf einer oberen Schicht ist als die <li>. Sie sollten stattdessen background-color auf li:hover setzen, oder verschieben Sie Ihren background-image auf das Element <a>. Das Bild muss sich auf derselben oder einer höheren Ebene als die Hintergrundfarbe befinden.