javascript - 在悬停时更改 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">

我已经有了“消息”部分来使用 CSS 更改颜色，但我还需要使 .SVG 图标在有人将鼠标悬停在链接的 DIV 上时从“-grey”变为“-blue”。我将如何实现这一目标？可能使用 CSS，如果不是，则使用 jQuery？

Answer 1

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