Javascript 未加载onmouseover和onmouseout图像

在我的个人网站上，我试图使用onmouseover/

onmouseout

创建一些基本动画。第一个URL表示一个小的（50 x 50）灰度图像，第二个URL是相同的图像，但颜色相同

<a><img src="link" onmouseover="this.src='url1'" onmouseout="this.src='url2'"></a>

---

代码是功能性的，但也有一些问题。我注意到，无论是在桌面上还是在移动设备上，点击图像链接后，图像都会消失。浏览器不会加载任何新图像是有道理的，但我想知道是否有更好的选择。

正如@minitech提到的，您应该使用CSS。。。HTML将类似于：

<a><div class="my_image"></div></a>

---

最好使用CSS和jQuery的组合来实现这类功能。您可以在站点的根目录或/img子目录中将图像保存为单独的文件，然后根据要更改图像的事件向链接添加一个类

下面是一些快速代码来说明：

HTML：

<div id="backgroundImg"><a class="img-link" href=""></a></div>

以及jQuery：

$('.image-link').mouseover().addClass('color').mouseout().removeClass('color');

因此，您将图像容器定义为div，通过CSS将图像作为链接本身的背景图像加载，然后在用户将鼠标悬停在.image链接元素上时更改类名

您可以更进一步，将两个图像组合成一个50x100图像精灵，以提高性能。然后CSS会像这样：

#backgroundImg a {
    width: 50px;
    height: 50px;
    background: url('img/grey-color-50x100.png') no-repeat;
    background-position: 0 0;
    display: block;
}

#backgroundImg a.color {
    background-position: 0 -50px;
} 

---

希望有帮助。

图像代表什么？一般来说，在这类事情上使用CSS是一个更好的主意。它们是社交网络的标志图标和相应的链接。理想情况下，我更喜欢在单击时显示任一图像。您认为在CSS中使用hover可以解决问题吗？是的，使用

:hover

/

:active

可以解决您的问题。我无法在您的代码中找到任何问题。可能存在路径问题，因此无法在mouseover/mouseoyt上加载图像。为了更好的实践，最好使用CSS来实现这一点。谢谢！我来试试看能不能治好它。

$('.image-link').mouseover().addClass('color').mouseout().removeClass('color');

#backgroundImg a {
    width: 50px;
    height: 50px;
    background: url('img/grey-color-50x100.png') no-repeat;
    background-position: 0 0;
    display: block;
}

#backgroundImg a.color {
    background-position: 0 -50px;
}