表格隔行变色_CSS实现鼠标悬停高亮

最新推荐文章于 2024-01-26 09:40:14 发布

weixin_30510153

最新推荐文章于 2024-01-26 09:40:14 发布

阅读量403

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/martinzhang/p/3299228.html

版权

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>表格隔行变色_CSS实现鼠标悬停高亮</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />        
    <script type="text/javascript" src="../jquery-1.8.2.js"></script>
    <script type="text/javascript">
    $(function(){
        //通过jQuery控制表格隔行换色，并鼠标悬停变色
        $('tr:even:gt(0)').addClass('tr_even');    //默认偶数行背景色，无视标题行用:gt(0)
        $('tr:odd').addClass('tr_odd');            //默认奇数数行背景色
        ////
    });
        
    </script>
    <style type="text/css">
    .headCls{background-color:#ccc;}    /* 标题背景色 */
    .tr_even{background-color:#EBF8FF}  /* 偶数行背景色 */
    .tr_odd{background-color:#DDECF3}   /* 奇数行背景色 */   
    .tr_even:hover,.tr_odd:hover{background-color:red;}      /* 通过CSS实现鼠标悬停高亮色 */
    </style>
</head>
<body>
    <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr class="headCls">
            <th>CSS实现鼠标悬停高亮</th>
            <th>CSS实现鼠标悬停高亮</th>
        </tr>
        <tr>
            <td>data1_1</td>
            <td>data1_2</td>
        </tr>
        <tr>
            <td>data2_1</td>
            <td>data2_2</td>
        </tr>
        <tr>
            <td>data3_1</td>
            <td>data3_2</td>
        </tr>
        <tr>
            <td>data4_1</td>
            <td>data4_2</td>
        </tr>
        <tr>
            <td>data5_1</td>
            <td>data5_2</td>
        </tr>
    </table>




</body>
</html>

转载于:https://www.cnblogs.com/martinzhang/p/3299228.html

weixin_30510153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格隔行变色_CSS实现鼠标悬停高亮

<!doctype html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>表格隔行变色_CSS实现鼠标悬停高亮</title> <meta na...
复制链接

扫一扫