title: How to invert the color of a png image on mouseover which is inside <a> tag?
body: <p>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.</p>
  
  <p>Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="nav nav-pills nav-stacked" data-role="panelbar" style="height: 600px;"&gt;
    &lt;li&gt;
        &lt;a&gt;
          &lt;span class="glyphicon glyphicon-user glyph-width"&gt;&lt;/span&gt;Group Name
          &lt;span id="edit-img" class="img-span pull-right"&gt;
              &lt;img src="images/glyphicons/Data-Edit.png"&gt;
          &lt;/span&gt;
        &lt;/a&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#edit-img :hover {
      -webkit-filter: invert(100%) !important;
  }
  </code></pre>
  
  <p>I am not able to invert the color of Data-Edit.png on mousehover. Please help.</p>