Javascript onmouseout 事件

Question

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

默认情况下，第一个圆圈点亮，当用户点击第二个圆圈时， slider 移动到第二个 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 对象来存储当前和目标图像(或基本图像、事件图像和悬停图像)，然后将其绑定(bind)到主脚本中。将 JS 移出本地事件并使用像 prototype.js 这样的库 Hook 事件可能会大大简化您的逻辑。或 jquery (虽然这有点矫枉过正——也许在其他地方有用!)