Javascript 使用onmouseover从Div更改图像源

是否可以从包含的div更改图像源？图像是动态的，从数据库中提取

v = $"<div onmouseover=\"document.navIcon.src='/Images/White/{reader[2]}';\" 
      onmouseout=\"document.navIcon.src='/Images/{reader[2]}';\">
<img name=\"navIcon\" src=\"Images/{reader[2]}\"><br>{reader[1]}</div>";

v=$”

{reader[1]}”；

这是我关于如何做的想法，但它似乎没有像预期的那样工作。当我把onmouseover部分放在中时，我能够让它工作，但是，我希望它在div中的任何地方都能改变，比如在reader[1]文本上，而不仅仅是直接在图像上

---

想法？

实现这一点的最佳方法是使用CSS

HTML

<img id="NavIcon">

---

我刚从谷歌图片上抓到一些图片。您可以使用

此

引用当前元素

---

问题在于图像是动态的。它们是从数据库中提取的。我还没有研究过它，但就我所知的CSS而言，我无法使用它。正确吗？此方法不考虑图像大小either@Iwrestledabearonce. 好消息是我的图片大小合适。但这种方法对动态图像毫无帮助。这种方法只适用于已知大小的图像。如果你知道图像的大小，简单的添加一行也可以CSS:

背景大小：XXpx-YYpx一般来说，使用与原始图像大小不同的视觉反馈不是最好的方法，因为它会产生令人不快的反馈，页面会闪烁。不幸的是，这仅在将鼠标悬停在图像上方时有效。我希望它的工作时，悬停在下面的文字也。这就是为什么我认为div是实现这一目标的最佳场所。
#Navicon {
  background-image: url(image1.jpg);
}
#NavIcon:hover {
  background-image: url(image2.jpg);
}