实现鼠标颠末时整行变色 ， 需要用到js中的两个事务 ， 一个是鼠标放在元素上触发的事务onmou搜索引擎优化ver ， 另一个是鼠标分开时触发的事务onmou搜索引擎优化ut ， 利用这两个事务可以实现鼠标颠末时整行变色的结果 。
文章插图
方式/
1新建一个HTML文件 ， 定名为test.html ， 用于实现鼠标颠末时整行变色的结果 。
文章插图
2在test.html页面 ， 利用table标签界说一个边框为1px ， 宽度为400px的表格 ， 代码如下：
文章插图
3【js实现鼠标经过时整行变色】在test.html页面 ， 利用表格行tr和单位格td标签 ， 在table标签内成立11行4列的表格用于测试 。
文章插图
4实现鼠标放在行tr标签上整行变色结果 。 利用鼠标滑过事务onmou搜索引擎优化ver绑定tr标签 ， 当鼠标滑过tr行标签时 ， 触发onmou搜索引擎优化ver事务去执行一个overIt函数 。
文章插图
5在overIt函数内利用对象的style属性中的backgroundColor设置来设置当前的布景颜色（这里设置为#ccc颜色） ， 实现鼠标放在行时改变布景颜色 。
文章插图
6利用鼠标分开事务onmou搜索引擎优化out绑定tr标签 ， 当鼠标分开行时 ， 事务触发执行outIt函数 ， 在outIt函数内实现设置整行的布景颜色为原表格颜色 。
文章插图
7至此 ， 完当作代码的编写 。 在浏览器运行test.html文件 ， 查看结果 。
由结果图可以看出 ， 当作功实现了鼠标放在整行时 ， 布景颜色为#ccc颜色 ， 当鼠标分开整行时 ， 行布景颜色恢回复复兴来的颜色 。
文章插图
文章插图
以上内容就是js实现鼠标经过时整行变色的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 有哪些适合同学聚会的经典游戏？
- 拜访朋友要注意哪些礼仪
- js实现输入二位数字后自动跳到下一输入框
- 茶文化在茶叶经济活动中的地位和意义，牛抵茶
- 中国茶道文化与养生，茶叶经销
- 养肾三字经里都有哪些干货？
- 华为nove7怎么隐藏刘海屏
- 3Dmax如何制作异形玻璃瓶
- 经销商和代理商的区别经销商和代理商的区别有什么
- 如何给已经加密的PDF文件解除密码？