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

Question

I am trying to create a menu where each links has an image/icon right next to it. I'd like the image to be black and white when it's inactive, but to be in color when i'm hovering over the image and the text.

I'v tried to use an .svg as explained in another question ( https://stackoverflow.com/a/4028908/3334898 ), it works but only when i'm hovering over the image, not the text :/.

Here is the CSS for the images:

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

And what the menu looks like :

<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>

Thank you.

Answer 1

Change your CSS to

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