Question

我有一个带搜索图标的菜单，是否可以在悬停事件中使用CSS更改图标的颜色？

<navbar id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="search"><img src="imagens/search-icon-2.png" width="25"  height="25"/></li>
        <li>

    </ul>

像这样:(不工作）

#menu ul li .search:hover{color:#fff;}

Answer 1

您可以制作两个不同的搜索图标（每种颜色一个）。并使用默认的彩色一个作为li的背景图像。像这样：

#menu ul li.search{
    background-image:url("normal_search_icon.png");
}

 #menu ul li.search:hover{
    background-image:url("coloured_search_icon.png");
}

Answer 2

试试这个：

<style>
 .search { /* other stuff */ background:url(url to black image); }
 .search:hover { /* other stuff */ background:url(url to blue image on hover); }
</style>

<div id="menu">
  <ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="search"></li>
  </ul>
</div>

css悬停在搜索图标中更改颜色？

2 个答案: