图像 onmouseover/onmouseout 不会改变答案

【问题标题】：Image onmouseover/onmouseout doesn't change图像 onmouseover/onmouseout 不会改变
【发布时间】：2014-01-30 14:14:43
【问题描述】：

当我用鼠标光标进入放置图像的容器框内时，我试图实现图像更改。在本地，一切正常，但在演示服务器上，例如，我必须单击每个框上的检查元素才能开始工作，而且在我这样做之后，有时它可以工作，有时不能。我在页面的头部添加了 jquery 在线库。有任何想法吗？这是我的代码：

<ul>
    <li> 
      <a href="#">
        <img src="img/img1.png" onmouseover="this.src='img/img2.png'" onmouseout="this.src='img/img1.png'"  alt="img">
      </a>
    </li>
    <li> 
      <a href="#">
        <img src="img/img1.png" onmouseover="this.src='img/img2.png'" onmouseout="this.src='img/img1.png'"  alt="img">
      </a>
    </li>
</ul>

【问题讨论】：

我认为这是因为您的图片加载时间过长，您需要在页面加载时使用 JS 等待或预加载图片
img1 在没有检查的情况下是否可以在服务器上工作？我的猜测是你的 img 路径不正确
另一方面，我认为您当前的解决方案不需要 jQuery。
Jquery 并不是什么神奇的软件。您必须在您的代码中实际使用它，而您目前还没有。
@dreamweiver 为什么使用 jQuery 会导致性能问题？用纯 JS 编写（很好）的东西可能会比 jQuery 替代方案更快，但在大多数情况下差异可以忽略不计。

标签： javascript jquery html onmouseover onmouseout

【解决方案1】：

你需要替换文件名。使用：

<ul>
<li> 
  <a href="#">
    <img src="img/img1.png" onmouseover="this.src=this.src.replace('img1','img2')" onmouseout="this.src=this.src.replace('img2','img1')"  alt="img">
  </a>
</li>
<li> 
  <a href="#">
    <img src="img/img1.png" onmouseover="this.src=this.src.replace('img1','img2')" onmouseout="this.src=this.src.replace('img2','img1')"  alt="img">
  </a>
</li>

【讨论】：