Javascript onmouseout 事件

Question

所以我有一个带有 3 个圆圈的导航和一个 jquery 滑块。

默认情况下，第一个圆圈会亮起，当用户单击第二个圆圈时，滑块会移动到第二个 div，然后该圆圈会亮起，而第一个圆圈会变暗。这与第三个圆圈的工作方式相同。

一切正常，这就是代码的样子

<img name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="this.src='img/bulletwhite.png';document.images['bullet2'].src='img/bullet.png';document.images['bullet3'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>
<img name="bullet2" height="30px" width="30px" src="img/bullet.png" onmousedown=" this.src='img/bulletwhite.png';document.images['bullet1'].src='img/bullet.png';document.images['bullet3'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>
<img name="bullet3" height="30px" width="30px" src="img/bullet.png" onmousedown=" this.src='img/bulletwhite.png';document.images['bullet1'].src='img/bullet.png';document.images['bullet2'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>

我的下一个任务是为圆圈添加悬停效果，但是当我给它悬停效果时，它会改变图像的 src 对吗？因此，当触发 onmouseout 时，要将其改回，它将始终是一个昏暗的圆圈，即使该圆圈之前是点亮的。

所以我的基本问题是，有什么方法可以在 onmouseover 更改它之前记住图像的 src，然后在触发 onmouseout 时使用它来将其恢复到以前的状态，我希望这是有道理的:)

任何建议都会有所帮助！

Answer 1

您可以尝试添加自定义属性来扩展类，或创建您自己的 JavaScript 对象来存储当前和目标图像（或基本、活动和悬停），然后将其绑定到主脚本中。将 JS 从本地事件中移出并使用诸如 prototype.js 或 jquery 之类的库来挂钩事件可能会大大简化您的逻辑（尽管这有点矫枉过正——可能在其他地方有用！）