Javascript 切换img src时添加转换

我正在为squarespace网站添加一个功能。当鼠标悬停在三个按钮中的一个上时，该功能是一种新的图像淡入/淡出效果。问题是静态/主图像是html中的img元素，而不是css中的，所以我不能这样更改它。我尝试在javascript中更改element.src，但是没有转换。在javascript代码中添加另一个元素以便我可以使用不透明度进行添加的img转换的最佳方法是什么？在正方形空间中工作时，要想把它放进去，似乎需要做很多额外的工作

有什么建议吗？顺便说一下，我有一个代码片段，显示了我的代码和问题

PS，按钮目前在图像下方。这不需要修复

让jw_backgroundswitch=document.querySelector（'.section background img'）；
让jw_btn=document.queryselectoral（'.sqs块内容h1a'）；
让图像=['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg']；
jw_btn.forEach（函数（jw_btn_当前，索引）{
jw_btn_current.addEventListener（'mouseenter'，function（）{
jw_backgroundswitch.src=图像[索引]；
});
jw_btn_current.addEventListener（'mouseleave'，function（）{
jw_backgroundswitch.src='1https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+蓝色+蓝色.jpg'；
});
})；

*，*：：之前，*：：之后{
框大小：边框框；
填充：0；
保证金：0；
}
身体{
高度：200vh；
}
.部门背景{
}
img{
背景重复：无重复；
过渡：全部。5s轻松进出；
}
ulwrapper先生{
显示器：flex；
高度：100vh；
对齐项目：居中；
}
.sqs块内容{
显示器：flex；
宽度：100%；
身高：4rem；
列表样式：无；
}
h1{
保证金：自动；
光标：指针；
}
H1A{
字体大小：粗体；
文字装饰：无；
颜色：黑色；
}

文件
按钮1
按钮2
按钮3

我将叠加两个

，然后用
imageover.style.opacity=“0”更改上面图像的不透明度；


wrapImages（）；
让imageBelow=document.querySelector（'.pics.below'）；
让imageover=document.querySelector（'.pics.over'）；
让jw_btn=document.queryselectoral（'.sqs块内容h1a'）；
让图像=['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg']；
jw_btn.forEach（函数（jw_btn_当前，索引）{
jw_btn_current.addEventListener（'mouseenter'，function（）{
imageBelow.src=图像[索引]；
imageover.style.opacity=“0”；
});
jw_btn_current.addEventListener（'mouseleave'，function（）{
imageover.src=https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+蓝色+蓝色.jpg'；
imageover.style.opacity=“1”；
});
});
函数wrapImages（）{
让sectionBackground=document.querySelector（'.sectionBackground'）；
让images=sectionBackground.getElementsByTagName（'img'）；
var newDiv=document.createElement（“div”）；
newDiv.className=“pics”；
sectionBackground.insertBefore（newDiv，sectionBackground.firstChild）；
newDiv.appendChild（图像[0]）；
newDiv.appendChild（图片[1]）；
图像[0]。className=“以下”；
图片[1]。className=“以上”；
}
*，*：：之前，*：：之后{
框大小：边框框；
填充：0；
保证金：0；
}
身体{
高度：200vh；
}
img{
背景重复：无重复；
过渡：全部。5s轻松进出；
}
.图片{
位置：相对位置；
宽度：100%；
高度：100vh；
}
.pics>img{
位置：绝对位置；
过渡：全部。4s轻松；
}
ulwrapper先生{
显示器：flex；
高度：100vh；
对齐项目：居中；
}
.sqs块内容{
显示器：flex；
宽度：100%；
身高：4rem；
列表样式：无；
}
h1{
保证金：自动；
光标：指针；
}
H1A{
字体大小：粗体；
文字装饰：无；
颜色：黑色；
}

文件
按钮1
按钮2
按钮3
谢谢您的回答！是否可以在squarespace网站中更改html，或者我是否可以将其添加到js代码中？这里有关于如何在squarespace上添加自定义html代码的信息和视频，因此我假设您可以更改html。谢谢您的帮助，但是您只能在代码块中添加html，我不需要想想有没有其他方法可以改变html。我不能用我的类来包装第一个静态图像，如果我试图使用一个现有的类，页面就会被css破坏。我现在添加了一种用JS编程添加包装的方法，创建了一个函数
wrapImages（）
好吧，我发现这两个图像不能在同一个div中，但两个img可以在具有相同类的div中。我几乎不知道该怎么做，也不知道是否有可能做到这一点。不过，我非常感谢您的帮助！