javascript - 如何在鼠标悬停时编辑 img src？

Question

在一个有很多图像的网站上，我想在每个图像上添加一个鼠标悬停事件。

我可以这样做:

<img class="brand" 
     src="img/brands-grey/image1.svg" 
     onmouseover="this.src='img/brands/image1.svg';" 
     onmouseout="this.src='img/brands-grey/image1.svg';"/>
<img class="brand" 
     src="img/brands-grey/image2.svg" 
     onmouseover="this.src='img/brands/image2.svg';" 
     onmouseout="this.src='img/brands-grey/image2.svg';"/>`

但我宁愿从 src 中删除/插入“-grey”onmouseover/out。有人可以向我指出如何实现这一目标吗？

提前致谢!

Answer 1

您将 jQuery 作为标签，因此这是一个 jQuery 解决方案:

$(document).ready(function(){
    $('img.brand').mouseenter(function(){
        $(this).attr('src', $(this).attr('src').replace('-grey', ''));
    }).mouseleave(function(){
        $(this).attr('src', $(this).attr('src').replace('brands', 'brands-grey'));
    });
});

HTML 将会更加简洁:

<img class="brand" src="img/brands-grey/image1.svg" />
<img class="brand" src="img/brands-grey/image2.svg" />

我不会使用 2 组图像，而是使用现有的 jQuery 插件，例如 jQuery.BlackAndWhite .