How to invert the color of a png image on mouseover which is inside <a> tag?

Question

I am working on bootstrap 3 where I'm creating a side navbar and want to place an image inside the anchor tag which is inside list tag. I want to invert the color of the image on mouseover, but its not happening. No effect takes place on mouseover. It will be great if anyone could help.

Here is my code:

HTML:

<ul class="nav nav-pills nav-stacked" data-role="panelbar" style="height: 600px;">
  <li>
      <a>
        <span class="glyphicon glyphicon-user glyph-width"></span>Group Name
        <span id="edit-img" class="img-span pull-right">
            <img src="images/glyphicons/Data-Edit.png">
        </span>
      </a>
   </li>
</ul>

CSS:

#edit-img :hover {
    -webkit-filter: invert(100%) !important;
}

I am not able to invert the color of Data-Edit.png on mousehover. Please help.

Answer 1

EDIT:

Check this DEMO

It's working in this case, should work in yours.

---

You'd have to apply it on the img tag

#edit-img:hover img{
    -webkit-filter: invert(100%) !important;
}

Answer 2

Are you using a webkit browser? For me it works on -webkit-browsers, check the css at https://peterpaulvanham.nl/. If you want to make it work on Firefox e.g. use

-webkit-filter: invert(100%) !important; //* chrome, safari

filter: invert(100%) !important; //* e.g. firefox

You don't need "!important" per se b.t.w.

Is this an answer to your problem?