实现鼠标放上高亮显示,鼠标移出显示原来的颜色

1.通过jQuery的形式实现

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <title>Bootstrap 实例 - 边框表格</title>
 5   <style type="text/css">
 6     .hover{background:#F00;}
 7 </style>
 8    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 9    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
10    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
11 <script type="text/javascript">
12     $(function(){
13     $("td").hover(
14         function(){
15             $(this).addClass("hover");
16             },
17
18         function(){
19                     $(this).removeClass("hover");
20             }
21     );
22         });
23 </script>
24 </head>
25 <body>
26
27 <table class="table table-bordered">
28    <caption>边框表格布局</caption>
29    <thead>
30       <tr>
31          <th>名称</th>
32          <th>城市</th>
33          <th>密码</th>
34       </tr>
35    </thead>
36    <tbody>
37       <tr>
38          <td>Tanmay</td>
39          <td>Bangalore</td>
40          <td>560001</td>
41       </tr>
42       <tr>
43          <td>Sachin</td>
44          <td>Mumbai</td>
45          <td>400003</td>
46       </tr>
47       <tr>
48          <td>Uma</td>
49          <td>Pune</td>
50          <td>411027</td>
51       </tr>
52    </tbody>
53 </table>
54
55 </body>
56 </html>

2.通过javascript原生实现

代码如下：

 1     <!DOCTYPE HTML>
 2     <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <script>
 7         window.onload=function ()
 8         {
 9             var oTab=document.getElementById('tab1');
10             var oldColor='';//用于保存原来一行的颜色
11
12             for(var i=0;i<oTab.tBodies[0].rows.length;i++)//oTab.tBodies[0].rows.length表示tBodies中有几行
13             {
14                 oTab.tBodies[0].rows[i].onmouseover=function ()
15                 {
16                     oldColor=this.style.background;
17                     this.style.background="green";
18                 };
19                 oTab.tBodies[0].rows[i].onmouseout=function ()
20                 {
21
22                     this.style.background=oldColor;//鼠标移出的时候将本行的颜色设置为原来的颜色，而原来的颜色保存在oldColor中
23
24                 };
25
26
27                 if(i%2)
28                 {
29                     oTab.tBodies[0].rows[i].style.background="#CCC";
30
31                 }else{
32                     oTab.tBodies[0].rows[i].style.background="";
33
34                 }
35             }
36
37         };
38
39      </script>
40     </head>
41
42     <body>
43     <table id="tab1" border="1" width="500">
44         <thead>
45             <td>ID</td>
46             <td>姓名</td>
47             <td>年龄</td>
48         </thead>
49
50         <tbody>
51         <tr>  <td>1</td>
52             <td>Xuan</td>
53             <td>23</td>
54         </tr>
55
56         <tr>  <td>2</td>
57             <td>XXX</td>
58             <td>25</td>
59         </tr>
60
61         <tr>  <td>3</td>
62             <td>SSS</td>
63             <td>24</td>
64         </tr>
65
66         <tr>  <td>4</td>
67             <td>李四</td>
68             <td>26</td>
69         </tr>
70
71         <tr>  <td>5</td>
72             <td>王五</td>
73             <td>29</td>
74         </tr>
75         </tbody>
76     </table>
77     </body>
78     </html>

转载于:https://www.cnblogs.com/cocos2014/p/4323976.html

实现鼠标放上高亮显示,鼠标移出显示原来的颜色相关推荐

JSP只展示3行, 鼠标放上展示所有
JSP只展示3行, 鼠标放上展示所有 <span class="operate3"> ${notices}</span> .operate3 {displa ...
php 鼠标点击图片放大,css3如何实现鼠标放上图片放大？（附代码）
在css3的学习中,我们会经常做一些小的动画效果,这感觉非常有趣,所以今天的这篇文章将给大家来介绍关于css3实现图片放大的一个效果,有兴趣的小伙伴可以看一下. 我们都知道css3中增加了一个tran ...
html里怎么把搜索框点击时变色,input搜索框鼠标放上或划过表单边框变色
input搜索框鼠标放上或划过表单边框变色代码: /p> Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 ...
php 鼠标小手,CSS如何让鼠标放上时的小手样式
CSS实现让鼠标放上时出现小手样式的方法:首先创建一个HTML示例文件:然后在body中添加一个span标签:接着给该标签添加"cursor:pointer;"样式来实现让鼠标放上 ...
4种方式实现鼠标放上图片变大效果
1.利用改变宽度的形式来实现通过鼠标放上将宽度增大来实现整个页面的变大.但是现实的效果会是从左上角开始增大的. 鼠标未放上的时候第一种方式鼠标放上去的时候 2.利用translateZ实现变化后 ...
HTML 鼠标放上显示悬浮窗口
项目中用到的功能,在这里记录下, 方便日后复用. 鼠标悬停,出现一个悬浮框,悬浮框中可以自定义一些内容,使用 bootstrap 的 popover 插件实现.可以直接看参考资料中的文章,插件使用说明 ...
Echarts图表坐标轴文字太长，省略显示，鼠标放上显示全部（vue）
先上图,看效果(截图截不到鼠标小手
html鼠标放上虚化背景图片,如何将网页CSS背景图高斯模糊且全屏显示
高斯模糊是PS.FW图片处理工具搞的. 全屏显示的方法 1:使用CSS.bg { background-image:url(scale.jpg); -moz-background-size: 100% ...
layui鼠标放上图片局部放大_花卉图片后期这5招，不美都不行！
朋友们,大家好!近期有许多朋友在后台咨询:拍出来的花卉,如何做后期才好看呢?所以,今天我们一起学习花卉的后期. 花卉作品后期从何入手一幅好的花卉作品少不了后期辅助,前期拍摄到位,后期制作就会容易很多 ...
layui鼠标放上图片局部放大_老照片修复教程之—裁剪图片大小
对于会PS的网友来说,这些内容太小白了,但对于不会的网友来说,完全摸不着头脑,所以,41图片老照片修复以最简单的工具使用说起,争取让PS小白也能快速入门. 本节的内容就讲裁剪图片大小: 扫描或者翻拍好 ...

实现鼠标放上高亮显示,鼠标移出显示原来的颜色

实现鼠标放上高亮显示,鼠标移出显示原来的颜色相关推荐

最新文章

热门文章