使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;

简介: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;

需求说明:


使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;

  • 鼠标离开时,按钮恢复原状。
  • “登录”按钮初始效果如图所示
  • 鼠标悬浮时,按钮高亮显示。“登录”按钮高亮显示效果如图所示


52.png


53.png


实现思路:


在 window 的 onload 事件中获取一组指定 name="btnLogin" 的“登录”按钮

用循环依次给每个 name=“btnLogin”的按钮设置 onmouseover 和 onmouseout 事件处理函数

在事件绑定的函数中,设置图像按钮的 src 属性,利用更换图像来达到高亮显示和恢复原状的特效


实现代码:

相关文章
|
2月前
|
存储 JavaScript 前端开发
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
|
14天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
27 4
|
2月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
2月前
|
小程序 JavaScript 前端开发
你的生日是星期几?HTML+JavaScript帮你列出来
你的生日是星期几?HTML+JavaScript帮你列出来
|
1月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
26 0
|
2月前
|
前端开发 JavaScript 开发工具
MASM32+ HTML & JavaScript,好搭档
MASM32+ HTML & JavaScript,好搭档
|
2月前
|
C++ Windows
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
|
移动开发 HTML5
HTML5/CSS3鼠标悬停动画菜单按钮
在线演示 本地下载
1036 0
|
13天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
36 1
[HTML、CSS]细节与使用经验