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

我想要做的是将鼠标悬停在图标上并且它仍然存在（正如您在屏幕上看到的那样，当我悬停时它会消失）

如果我删除文本它不会正确对齐，当我悬停时它不会覆盖整个背景块

Answer 1

您的background-image已设置为<li>元素，但您的background-color设置为<a>，因此它位于{{1}的上层}}。您应该将<li>设置为background-color，或者将li:hover移至background-image元素。图像需要与背景颜色位于相同或更高的层上。