Html 将鼠标悬停在li上时更改图像颜色

我正在尝试创建一个菜单，其中每个链接旁边都有一个图像/图标。我希望图像处于非活动状态时为黑白，但在图像和文本上方悬停时为彩色

正如另一个问题（）中所解释的那样，我尝试使用.svg，但只有当我将鼠标悬停在图像上，而不是文本上时，它才起作用：/

以下是图像的CSS：

.nav img
{
    height: 30px;
    width: 30px;
    margin-right: 5px;
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

.nav img:hover 
{
    filter: none;
    -webkit-filter: grayscale(0);
}

菜单是什么样子的：

<div class="nav">

        <ul>

            <li id="home"><a href="index.php"><img src="menu/person.png">Présentation</a></li>
            <li id="formation"><a href="formation.php"><img src="menu/tablet.png">Formations</a></li>
            <li id="competence"><a href="competences.php"><img src="menu/etiquette.png">Compétences</a></li>
            <li id="experience"><a href="experiences.php"><img src="menu/work.png">Expériences</a></li>
            <li id="autre"><a href="autres.php"><img src="menu/autre.png">Autres</a></li>

        </ul>

    </div>

谢谢。

将CSS更改为

.nav a:hover img {
    filter: none;
    -webkit-filter: grayscale(0);
}

---

谢谢你，这是有效的，我对HTML/CSS还很陌生，所以我不知道可以这样做：）。不客气！继续学习，如果使用得当，你会惊讶于CSS能做什么！