JavaScript onmouseout 事件

发布于 2024-09-03 18:33:50 字数 1197 浏览 3 评论 0原文

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

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

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


<代码>
<代码>

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

所以我的基本问题是,有没有办法让它在 onmouseover 更改图像之前记住图像的 src,然后在触发 onmouseout 时使用它将其恢复到之前的状态,我希望这是有意义的:)

任何建议会有帮助!

So I have a nav with 3 circles, and a jquery slider.

By default the first circle is lit up, and when a user clicks on the 2nd circle the slider moves to the 2nd div and then that circle is lit and the 1st circle dims out. This works the same way with the 3rd circle.

Everything works fine, this is what the code looks like


<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)"/>

My next task is to add a hover effect to the circles, however when I give it the hover effect, it changes the src of the image right? so when the onmouseout is triggered, to change it back, it will always be a dim circle, even if the circle was previously lit.

So my basic question is this, is there any way for it to remember the src of the image BEFORE onmouseover changes it and then using that to bring it back to its previous state when the onmouseout is triggered, I hope that makes sense :)

Any advice would help!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

鸠魁 2024-09-10 18:33:50

您可以尝试添加自定义属性来扩展该类,或者创建自己的 JavaScript 对象,该对象将存储当前图像和目标图像(或基本图像、活动图像和悬停图像),然后将其绑定到主脚本中。将 JS 移出本地事件并使用像 prototype 这样的库挂钩事件可能会大大简化您的逻辑。 jsjquery (尽管这有点矫枉过正 - 也许在其他地方有用!)

You could try adding a custom attribute to extend the class, or create your own JavaScript object which will store current and target images (or base, active, and hover), then tie that into the main script. It would probably simplify your logic a lot to move the JS out of the local events and hook the events using a library like prototype.js or jquery (though this is overkill - maybe useful elsewhere!)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文