js实现鼠标经过时整行变色

实现鼠标颠末时整行变色,需要用到js中的两个事务,一个是鼠标放在元素上触发的事务onmou搜索引擎优化ver,另一个是鼠标分开时触发的事务onmou搜索引擎优化ut,利用这两个事务可以实现鼠标颠末时整行变色的结果。

方式/步调

  1. 1

    新建一个HTML文件,定名为test.html,用于实现鼠标颠末时整行变色的结果。

  2. 2

    在test.html页面,利用table标签界说一个边框为1px,宽度为400px的表格,代码如下:

  3. 3

    在test.html页面,利用表格行tr和单位格td标签,在table标签内成立11行4列的表格用于测试。

  4. 4

    实现鼠标放在行tr标签上整行变色结果。利用鼠标滑过事务onmou搜索引擎优化ver()绑心猿意马tr标签,当鼠标滑过tr行标签时,触发onmou搜索引擎优化ver事务去执行一个overIt()函数。

  5. 5

    在overIt()函数内利用对象的style属性中的backgroundColor设置来设置当前的布景颜色(这里设置为#ccc颜色),实现鼠标放在行时改变布景颜色。

  6. 6

    利用鼠标分开事务onmou搜索引擎优化out()绑心猿意马tr标签,当鼠标分开行时,事务触发执行outIt()函数,在outIt()函数内实现设置整行的布景颜色为原表格颜色。

  7. 7

    至此,完当作代码的编写。在浏览器运行test.html文件,查看结果。

    由结果图可以看出,当作功实现了鼠标放在整行时,布景颜色为#ccc颜色,当鼠标分开整行时,行布景颜色恢回复复兴来的颜色。

  • 发表于 2019-08-04 22:17
  • 阅读 ( 1075 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

0 篇文章

作家榜 »

  1. xiaonan123 189 文章
  2. 汤依妹儿 97 文章
  3. luogf229 46 文章
  4. jy02406749 45 文章
  5. 小凡 34 文章
  6. Daisy萌 32 文章
  7. 我的QQ3117863681 24 文章
  8. 华志健 23 文章

联系我们:uytrv@hotmail.com 问答工具