Javascript 在悬停的span/div中更改SVG图标的最简单方法是什么？

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

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

图标的名称如下：

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

我已经获得了使用CSS更改颜色的“消息”部分，但我还需要使.SVG图标在有人悬停在链接的DIV上时从“-灰色”更改为“-蓝色”。我如何实现这一点？可能使用CSS，如果没有，jQuery？

尝试使用

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

---

在css中。

使用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);
});

---

下一次就可以了。ThanksHow如果问题带有

标记，并且答案使用背景图像，那么此答案是否适用于该问题？