Css 当我将鼠标悬停在链接上时，希望切换图像

我已经为这个问题挣扎了一段时间，我一直在寻找其他类似的问题，但还没有找到我问题的答案。当我将鼠标悬停在图像下方的链接上时，我希望更改导航栏中的图像

例如，当我不将鼠标悬停在“主页”链接上时，这是我的导航栏

这就是我在“主页”链接上悬停时想要发生的事情

任何帮助都将不胜感激

*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
字号：18px；
字体系列：“Poppins”；
}
李，a{
文字装饰：无；
颜色：白色；
}
保险商实验室{
列表样式：无；
}
navbar先生{
显示器：flex；
弯曲方向：行；
宽度：100%；
证明内容：中心；
对齐项目：居中；
左边距：2米；
垫面：2米；
}
.navlink:：之前{
内容：“；
位置：绝对位置；
宽度：50px；
高度：5px；
背景色：#703FFF；
边缘顶部：120px；
左边距：2倍；
边界半径：10px；
}
.navlink:n最后一个子项（2）：：之前{
左边距：20px；
}
.navlink:最后一个子项：：之前{
左边距：15px；
}
.导航链接{
显示器：flex；
弯曲方向：立柱；
右边距：2.5em；
}
.navlink img{
宽度：3em；
自对准：居中；
}
/*投资组合链接*/
.navlink:n最后一个孩子（3）{
右边距：2米；
}
/*联系方式*/
.navlink:最后一个孩子{
左边距：-1米；
}
.导航链接a{
自对准：居中；
边缘顶部：2米；
文本转换：大写；
字号：600；
字体大小：16px；
}
.新浪潮{
背景：url（“../images/Nav_Wave.png”）居中/封面不重复；
高度：110vh；
}

---

当您将鼠标悬停在链接上时，可以使用javascript更改img src。当你离开的时候把它放回去

首先为元素提供一些ID：

<img  id ="home-img"src="images/home_dark.png" alt="">                                                                                   
<a id ="home" href="#">home</a>

---

当我将鼠标移到链接上时，如果我想在图像上添加一个过渡效果，我该怎么办？@Greger这有点棘手，但是你可以为你的元素创建一个具有所需效果的css类，然后在enter键上添加该类，在Leve键上删除该类。这将导致元素显示动画。检查更多。

document.getElementById("home").onmouseenter = function() {
  document.getElementById("home-img").src = "other/img.png"
}
document.getElementById("home").onmouseleave = function() {
  document.getElementById("home-img").src = "images/home_dark.png"
}