鼠标移动到指定行会变色

实现效果
案例分析
实现代码

 <title>鼠标移动到对应行会进行变色</title><style>table {width: 800px;margin: 100px auto;text-align: center;border-collapse: collapse;font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;}tbody td {border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.out {background-color: honeydew;}.over {background-color: pink;}</style>
</head><body><table><thead><tr><th>代码</th><th>名称</th><th>最新公布净值</th><th>累计净值</th><th>前单位净值</th><th>净值增长率</th></tr></thead><tbody><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr></tbody></table><script>var row = document.querySelector('tbody').querySelectorAll('tr');// 同类型，利用循环绑定事件for (var i = 0; i < row.length; i++) {row[i].onmouseover = function () {this.className = 'over'}row[i].onmouseout = function () {this.className = 'out'}}</script>
</body>

鼠标移动到指定行会变色相关推荐

html 点击一行变色,elementui点击table每一行会变色，当有固定列的时候，
1. html代码 @row-click="rowClick" :row-class-name="tableRowClassName" :row-style=& ...
《div图层被鼠标划过时其背景色变色的五种方式》
概述: 同样是为了提高用户体验程度,本篇内容将叙述:div图层被鼠标划过时其背景色改变,鼠标离开相关div图层时其颜色变为原来的颜色.实现上述效果下面总结了五种实现方式,请您耐心阅读,或许会有点收获. ...
鼠标划过表格行变色效果JS
 <script type="text/javascript"> /* 当鼠标移到表格上是,当前一行 ...
java鼠标经过时变色_鼠标经过时单元格变色
鼠标经过时单元格变色 table{ color:#565; font:12px Arial, Helvetica, sans-serif; } td{ border-bottom:2px solid ...
python selenium 鼠标移动到指定元素，并点击对应的元素
在使用selenium 爬去网页信息的时候,我们经常会遇到这样的一个问题.就是某一关键字或者元素,必须是鼠标悬浮上,才会出现,然后才能点击.那下面,我们就用python实现这一功能. 举例来说: 假设 ...
js鼠标移动到指定位置_Python: pyautogui模块之鼠标控制
文章背景:PyAutoGUI是一个纯Python的GUI自动化工具,其目的是可以用程序自动控制鼠标和键盘操作,利用它可以实现自动化任务.pyautogui模块中包含了一些函数,可以模拟鼠标移动.按键和 ...
搜索关键字变红，指定字段变色一行代码简单集成搜索关键字变红，Android字体变红，指定字段变红
搜索关键字变红,指定字段变色有时候我们搜索中的关键字需要变红或者变为别的颜色,我自己重写了textview.使用起来特别方便使用步骤 1,把下面自定义的MyTextView 复制到项目中 impo ...
CSS便签样式效果，鼠标移动到指定便签显示隐藏内容
css便签样式效果,鼠标移动到指定便签显示隐藏内容这是效果图欢迎大家一起交流学习这里放了源码 <!DOCTYPE html> <html lang="zh"& ...
html中点击导航栏变色,JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: JAVASCRIPT之导航栏鼠标点击变色特效 body { font-size:12px; font-family: Ar ...
鼠标指针经过时背景变色
目录一.如何使用鼠标指针经过时背景变色? 二.使用步骤 1.CSS(表格的样式) 2.表格(5行7列的一个表格) 2.Script部分(实现鼠标指针经过时背景变色效果) 总结提示:以下是本篇文章正 ...

鼠标移动到指定行会变色

鼠标移动到指定行会变色相关推荐

最新文章

热门文章