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的选择器均可以实现类似的效果，具体用那种实现方式结合具体情况使用。

三、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>8.4 演示文档</title>

     <style type="text/css">

         /*#tab{

             background: orange

         }

         #tab:hover{

             background: green

         }*/

     </style>

 </head>

 <body>

     <table id="tab" border="1" onmouseover="change('red')" onmouseout="change('pink')">

     <caption>表格名称</caption>

     <thead>

         <tr>

             <th colspan="3">标题1</th>

         </tr>

     </thead>

     <tbody>

         <tr>

             <td>单元格11</td>

             <td>单元格12</td>

             <td>单元格13</td>

         </tr>

         <tr>

             <td>单元格21</td>

             <td>单元格22</td>

             <td>单元格23</td>

         </tr>

         <tr>

             <td>单元格31</td>

             <td>单元格32</td>

             <td>单元格33</td>

         </tr>

         </tbody>

         <tfoot><td>备注：</td><td colspan="2"></td></tfoot>

     </table>

     <script>

         // function change1(){

         //  var tab=document.getElementById('tab')

         //  tab.style.background='orange'

         // }

         // function change2(){

         //  var tab=document.getElementById('tab')

         //  tab.style.background='green'

         // }

         function change(c){

          var tab=document.getElementById('tab')

          tab.style.background=c

         }

     </script>

 </body>

 </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属性。

巴特西

html中如何实现表格移入移出时背景颜色改变？（两种方法）

html中如何实现表格移入移出时背景颜色改变？（两种方法）

一、总结

1、通过css的table标签的hover属性：

2、通过js的onmouseover(),onmouseout()事件：

二、html中如何实现表格移入移出时背景颜色改变？（两种方法）

三、代码

四、测试题-简答题

1、如何设置一个元素的hover属性？

2、如何在css中设置一个标签的样式？

3、在css中设置样式的时候，属性和值之间是什么符号？

4、在css中设置样式的时候，属性设置在什么符号中？

5、js中鼠标移入某元素和移出某元素的事件名字是什么？

6、如何给一个元素添加鼠标移出事件？

7、js函数调用的时候如何带字符串参数？

8、js中如何实现带参数函数？

9、如何通过js实现表格移入移出时背景颜色改变？

10、如何通过css实现表格移入移出时背景颜色改变？

最新文章

热门文章