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权利？因此当触发鼠标时，要将其改回，它始终是一个昏暗的圆圈，即使圆圈先前已点亮。

所以我的基本问题是，有没有什么办法让它记住图像的src之前，onmouseover改变它，然后使用它将它恢复到以前的状态，当onmouseout被触发时，我希望这感觉:)

任何意见，将有助于！

Answer 1

您可以尝试添加自定义属性来扩展该类，或者创建自己的JavaScript对象来存储当前和目标图像（或基本，活动和悬停），然后将其绑定到主脚本中。这可能会简化你的逻辑，把JS从本地事件中移出来，并使用像prototype.js或jquery这样的库挂钩事件（尽管这是过度杀伤 - 也许在其他地方有用）。