当前位置:网站首页 > 网站建设教程 > HTML教程 > 正文

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

教程管理员 发布于2023-09-28 09:30 HTML教程 132

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

需求说明:


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

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


52.png


53.png


实现思路:


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

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

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


实现代码:


琼ICP备09004296号-12