html中如何实现表格移入移出时背景颜色改变？（两种方法）
一、总结
1、通过css的table标签的hover属性：
10 #tab:hover{
11 background: green
12 }
2、通过js的onmouseover(),onmouseout()事件：
16 <table id="tab" border="1" onmouseover="change('red')" onmouseout="change('pink')">
51 function change(c){
52 var tab=document.getElementById('tab')
53 tab.style.background=c
54 }
二、html中如何实现表格移入移出时背景颜色改变？（两种方法）
1、动态改变表格背景色案例说明
- 实例描述：
JS实现鼠标移入移出时表格背景色变化
- 案例要点：
通过onmouseover(),onmouseout()以及CSS的选择器均可以实现类似的效果，具体用那种实现方式结合具体情况使用。
三、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>8.4 演示文档</title> 6 <style type="text/css"> 7 /*#tab{ 8 background: orange 9 } 10 #tab:hover{ 11 background: green 12 }*/ 13 </style> 14 </head> 15 <body> 16 <table id="tab" border="1" onmouseover="change('red')" onmouseout="change('pink')"> 17 <caption>表格名称</caption> 18 <thead> 19 <tr> 20 <th colspan="3">标题1</th> 21 </tr> 22 </thead> 23 <tbody> 24 <tr> 25 <td>单元格11</td> 26 <td>单元格12</td> 27 <td>单元格13</td> 28 </tr> 29 <tr> 30 <td>单元格21</td> 31 <td>单元格22</td> 32 <td>单元格23</td> 33 </tr> 34 <tr> 35 <td>单元格31</td> 36 <td>单元格32</td> 37 <td>单元格33</td> 38 </tr> 39 </tbody> 40 <tfoot><td>备注：</td><td colspan="2"></td></tfoot> 41 </table> 42 <script> 43 // function change1(){ 44 // var tab=document.getElementById('tab') 45 // tab.style.background='orange' 46 // } 47 // function change2(){ 48 // var tab=document.getElementById('tab') 49 // tab.style.background='green' 50 // } 51 function change(c){ 52 var tab=document.getElementById('tab') 53 tab.style.background=c 54 } 55 </script> 56 </body> 57 </html>
四、测试题-简答题
1、如何设置一个元素的hover属性？
解答：在css样式中设置，选择到元素然后:（冒号）hover{}来设置，如果是id就是#号，是类就是点号。
2、如何在css中设置一个标签的样式？
解答：标签名{ 属性:值 }，就是选择到元素，然后在大括号中设置值，属性和值之间是冒号。
3、在css中设置样式的时候，属性和值之间是什么符号？
解答：英文状态下的冒号。
4、在css中设置样式的时候，属性设置在什么符号中？
解答：大括号
5、js中鼠标移入某元素和移出某元素的事件名字是什么？
解答：onmouseover()和onmouseout()。
6、如何给一个元素添加鼠标移出事件？
解答：在元素的标签中添加onmouseout="函数名()"; onmouseout="change()"。
7、js函数调用的时候如何带字符串参数？
解答：onmouseover="change('red')"。 括号里面是单引号包起来的字符串。
8、js中如何实现带参数函数？
解答：和php、java中一样，function change(c){}。
9、如何通过js实现表格移入移出时背景颜色改变？
解答：设置一个带参数的函数，在函数里面讲表格dom对象的style的background属性赋值为这个颜色参数，然后在标签中通过onmouseover和onmouseout调用。
10、如何通过css实现表格移入移出时背景颜色改变？
解答：在css样式设置中，通过css选择器获取元素，然后设置background属性。