.pngナビゲーションバーの背景画像として

Question

私はHTMLとCSSの新機能です。これはプロジェクトではなく、自分で発見することです。リスト（ul、li）を使用してナビゲーションバーを作成しようとしており、ナビゲーションバーに他のテキストとともに検索アイコンとユーザーログインアイコンを配置したいとします。これは私の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> 

、これは私の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;   
} 

は、アイコンの上にカーソルを移動することで、あなたが見ることができるように、それはまだ（があるだろう私は置くと、それが消え、画面キャップ）

私はテキストを削除した場合には、適切に配置され文句を言わないと私はそれがBACのブロック全体をカバーしていない置くと、 kground

Answer 1

あなたbackground-imageは<li>要素に設定されているが、それは<li>よりも上層にされているので、あなたのbackground-colorは、あなたの<a>に設定されています。代わりにbackground-colorをli:hoverに設定するか、background-imageを<a>要素に移動する必要があります。イメージは、背景色と同じかそれ以上の層にある必要があります。