如何在<a>标签内的鼠标悬停上反转png图像的颜色？

Question

我正在使用bootstrap 3,我正在创建一个侧导航栏,并希望将图像放在list标签内的锚标签内.我想在鼠标悬停时反转图像的颜色,但它没有发生.鼠标悬停没有任何影响.如果有人能提供帮助,那将会很棒.

这是我的代码:

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

我无法在鼠标悬停时反转Data-Edit.png的颜色.请帮忙.

Answer 1

编辑:

检查这个演示

它在这种情况下工作,应该在你的工作.

你必须在img标签上应用它

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