在 span/div 悬停时更改 SVG 图标的最简单方法？

Question

我有一个 Bootstrap 网站，其导航如下：

<a href="">
  <div class="panel panel-default">
    <div class="panel-body">
      <img src="img/messages-grey.svg">
    </div>
    <div class="panel-footer panel-categories-footer-small">
      Messages
    </div>
  </div>
</a>

图标都是这样命名的：

<img src="img/messages-grey.svg">
<img src="img/messages-blue.svg">
<img src="img/settings-grey.svg">
<img src="img/settings-blue.svg">

我已经得到 'Messages' 部分来改变颜色 CSS，但我还需要使 .SVG 图标在有人悬停时从“-grey”变为“-blue”通过链接 DIV。我将如何实现这一目标？可能使用 CSS，如果不是，jQuery?

Answer 1

尝试使用

a:hover{
   background-image:url(img/messages-blue.svg);
}

在 css.

Answer 2

无法使用 CSS 更改 img 的 src 属性。

不过，您可以使用 Javascript。用 jQuery 做这件事非常简单：

$("a").hover(function () {
    $(this).data("originalImage", $(this).attr("src"));
    $(this).find("img:first").attr("src", "path-to-new-img.svg");    
}, function () {
    var original = $(this).data("originalImage");
    $(this).find("img:first").attr("src", original);
});

在 span/div 悬停时更改 SVG 图标的最简单方法？

the easiest way to change SVG icons in a span/div on hover?

javascript

jquery

html

css

svg