jQuery实现鼠标移动到表格上时变色

最新推荐文章于 2022-03-28 16:57:52 发布

java_min

最新推荐文章于 2022-03-28 16:57:52 发布

阅读量3.5k

点赞数

分类专栏： It 文章标签： jquery function html border table class

本文链接：https://blog.csdn.net/java_min/article/details/7446021

版权

It 专栏收录该内容

190 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" http://www.w3.org/TR/html4/loose.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <style type="text/css">
        th{
          background: #0066FF;
          color:#FFFFFF;
          line-height: 20px;
          height: 30px;
        }
        td{
          padding: 6px 11px;
          border-bottom: 1px solid #95bce2;
          vertical-align: top;
          text-align: center;
        }
        td *{
          padding: 6px 11px;
        }
        tr.alt td{
          background: #ecf6fc;
        }
        tr.over td{
          background: #bcd4ec;
        }

        </style>

        <script type="text/javascript">
      $(document).ready(function(){
       $(".simier tr").mouseover(function(){
        $(this).addClass("over");
       }).mouseout(function(){
        $(this).removeClass("over")
       });

       $(".simier tr:even").addClass("alt");
      });
    </script>

    </head>
    <body>
    <div align="center">
      <table class="simier" width="50%" border="0" cellspacing="0" cellpadding="0">
      <tr>
       <td>姓名</td><td>年龄</td>
      </tr>
      <tr>
       <td>simier</td><td>27</td>
      </tr>
      <tr>
       <td>java_min</td><td>23</td>
      </tr>
    </table>
    </div>
    </body>
</html>