CSS+JS鼠标悬停单元格变色
- 又一款鼠标悬停表格单元格，表格变色的实例效果，运用了CSS和JS两者技术的结合，因些兼容性非常好，而且易于控制，代码修改方便，跟表格读取动态数据没有任何关系，比较方便。
<html>
<head>
<title>鼠标悬停单元格变色</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
<!--
#myTable{
width:100%;border-collapse:collapse;margin:1em 0;
}
#myTable th,td{
text-align:left;padding:.5em;border:1px solid #fff;
}
th{
background-color:#328aa4;color:#fff;
}
td{background:#e5f1f4;}
tr.even td{background:#e5f1f4;}
tr.odd td{background:#f8fbfc;}
tr.over td{background:#bce774;}
tr.out td{}
-->
</style>
</head>
<body οnlοad="changeTableBg();">
<table width="500" id="myTable" cellspacing="0" cellpadding="0">
<tr>
<th>title</th>
<th>title</th>
<th>title</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<script type="text/javascript">
<!--
function changeTableBg()
{
var changeTr=document.getElementById("myTable").getElementsByTagName("tr");
for(i=0;i<changeTr.length;i++)
{
changeTr[i].className=(i%2>0)?"even":"odd";
changeTr[i].temp=changeTr[i].className;
changeTr[i].οnmοuseοver=function(){
this.className='over';
}
changeTr[i].οnmοuseοut=function(){
this.className=this.temp;
}
}
}
//-->
</script>
</body>
</html>
转载于:https://www.cnblogs.com/youtianxia/p/3875021.html
CSS+JS鼠标悬停单元格变色相关推荐
- html悬停显示图片,JS实现悬停单元格显示图片
2.1 准备模板 1)准备内置模板: %FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\DynamicCol\函数实现动态列.cpt 打开模板,模板 ...
- java鼠标经过时变色_鼠标经过时单元格变色
鼠标经过时单元格变色 table{ color:#565; font:12px Arial, Helvetica, sans-serif; } td{ border-bottom:2px solid ...
- CSS实现鼠标悬停图片时的边框变色效果
CSS实现鼠标悬停图片时的边框变色效果,CSSS双边框,鼠标悬停变色效果,用CSS实现的图片双边框效果,鼠标悬停经过时显示背景色,很简单的效果,网上常见,代码不复杂,用的是一些基本的CSS知识. &l ...
- EXT 单元格变色，跨行跨列
单元格变色 {header: "年度目标达成率", dataIndex: 'year_reach_rate',width: 130, align: 'center',rendere ...
- html表格鼠标划过变色,CSS实现鼠标滑过表格变色
每个单元格变色: 第1行 第1列 第2行 第2列 第3行 第3列 第4行 第4列 第5行 第5列 ------------------------ 以上都用到expression,实现变得很方便,但是 ...
- html 鼠标单击单元格,vue-easytable点击表格中某个单元格操作
一:vue-easytable的地址 http://doc.huangsw.com/vue-easytable/app.html#/table/hideTable 二:改变当前鼠标悬浮单元格的样式 1 ...
- 单元格变色和图片透明
用单元格变色的方法来做网页导航,在网上可以经常看到,但代码有简有繁,如果运用样式表来实现,将可以节约很多代码,特别是当有很多行需用这种效果时: 1 .aa { background-color:# ...
- css 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像？
英文 | https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/?ref=rp翻译 | web前端开发 ...
- [css] 如何让表格单元格等宽显示
[css] 如何让表格单元格等宽显示 table-layout: fixed; width: 100%; 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...
最新文章
- Script:Speed Up Large Index Create or Rebuild
- 新建了一个英文Blog
- pythonpackage详解_Python详解之包管理：__init__.py
- dubbo forbid service的解决办法
- 通勤一小时，堵车半小时，AI 救救社畜
- 对 5G “迟钝”的苹果，该如何后来居上？| 极客头条
- 系统集成项目管理工程师 笔记（第一章：信息化知识）
- 罗马数字转换阿拉伯数字
- 职称英语职称计算机如何折算为学时,发表论文算继续教育多少学时
- DTOJ#5208. 蓝buff一吃就起飞
- iptable命令参数详解
- 《JavaScript_DOM编程艺术》Chapter05 最佳实践,Chapter06 图片库改进版---20210427
- 如何快速的将word文档中的图片提取出来
- 如何在iOSnbsp;8中使用Swift和Xco…
- python开发cs程序_CSE209代做、代写Computer Graphics、代做CS/python编程设计代写Python程序|代做Processing...
- Android设备双屏显示
- AE（ArcGIS Engine）的安装与配置（附加ArcGIS安装及所需安装包）
- 动态gmm模型学习笔记3-动态面板回归的GMM方法
- 论文阅读笔记 | 目标检测算法——Libra R-CNN算法
- 最新最全论文合集——STOC 历年最佳论文汇总