如何使用javascript更改悬停时的图像源，但适用于每张照片

我想在悬停时更改每个图像的图像源。我将拥有悬停之前存在的原始url（用yes.png表示），以及悬停之后存在的新url（用yes2.png表示）。关键是，新的url与原始url相同，只是在悬停时添加了一个2。我希望这是用javascript完成的。我是javascript新手，但我如何添加到这一点上呢

使这一点不同的是，每个图像的图像源都不同，但它适用于每个图像

var url = getElementsByClassName ('card-img-top').src
var newImg = url+2

---

为

mouseover

和

mouseout

事件添加侦听器

getElementsByClassName

返回一个集合，您必须循环它以添加所有元素的处理程序

const cards = getElementsByClassName('card-img-top');
Array.from(cards).forEach(card => {
    card.addEventListener("mouseover", function() {
        let url = this.src;
        let newImg = url + "2";
        this.src = newImg;
    });
    card.addEventListener("mouseout", function() {
        let url = this.src;
        let newImg = url.substr(0, -1);
        this.src = newImg;
    });
});

---

不确定为什么要更改源。 但是，您是否可以尝试使用精灵作为背景图像，并使用：hovercss伪选择器更改背景位置

---

这是另一个可以帮助你的问题：

你可以相对容易地做到这一点。您可以找到

.png

在字符串中的位置，并在

鼠标指针上插入一个
2
，然后在
鼠标指针上移除2

我不确定您是否只是想更改悬停在上面的图像或更改所有图像，因此我将提供一个如何同时执行这两个操作的示例。首先，也可能是您要查找的内容，我将仅更改悬停在上面的图像：


const imgs=document.getElementsByTagName（'img'）；
[…imgs].forEach（img=>{
img.addEventListener（'mouseenter'，（）=>{
const newSrc=img.src.slice（0，img.src.indexOf（'.png'））+2+img.src.slice（img.src.indexOf（'.png'））；
console.log（newSrc）；
img.src=newSrc；
})
img.addEventListener（'mouseout'，（）=>{
const newSrc=img.src.slice（0，img.src.indexOf（'.png'）-1）+img.src.slice（img.src.indexOf（'.png'））；
console.log（newSrc）；
img.src=newSrc；
})
});
img{
高度：100px；
宽度：100px；
}

哦！我正在更改源代码，因为这些图像是产品的预览。通常，当您将鼠标悬停在图像上时，会出现产品的第二个图像。谢谢。如果有图像悬停在上面，你想让所有的图像都改变src吗？效果很好。非常感谢你@很高兴我能帮忙。快乐编码：）