鼠标滑过table时修改表格行的背景颜色

最新推荐文章于 2022-04-13 13:34:02 发布

weixin_30929195

最新推荐文章于 2022-04-13 13:34:02 发布

阅读量1.6k

点赞数

文章标签： javascript java xhtml ViewUI

原文链接：http://www.cnblogs.com/huashanqingzhu/p/8870215.html

版权

方法一：

#customers tr:hover
{
    
    background-color: #f00;  
}

方法二：

<tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">  
    <td>Apple</td>  
    <td>Steven Jobs</td>  
    <td>USA</td>  
</tr>

完整样例：

 1 <html>  
 2 <head>  
 3 <style type="text/css">  
 4     #customers  
 5       {
       
 6           font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;  
 7           width:100%;  
 8           border-collapse:collapse;  
 9       }  
10       
11     #customers td, #customers th   
12       {
       
13           font-size:1em;  
14           border:1px solid #98bf21;  
15           padding:3px 7px 2px 7px;  
16       }  
17       
18     #customers th   
19       {
       
20           font-size:1.1em;  
21           text-align:left;  
22           padding-top:5px;  
23           padding-bottom:4px;  
24           background-color:#A7C942;  
25           color:#ffffff;  
26       } 
27         #customers tr:hover
28         {
      /*方法一*/
29             background-color: #f00;  
30         }
31 </style>  
32 </head>  
33   
34 <body>  
35     <table id="customers">  
36         <tr>  
37             <th>Company</th>  
38             <th>Contact</th>  
39             <th>Country</th>  
40

最低0.47元/天解锁文章

weixin_30929195

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标滑过table时修改表格行的背景颜色

方法一：#customers tr:hover{ background-color: #f00; }方法二：<tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'"> <td>Appl...
复制链接

扫一扫