模拟在table中移动鼠标,高亮显示鼠标所在行

在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟。

具体代码如下:

 

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            border: none;
            padding: 0px;
            text-align: center;
        }

        table {
            flex-align: center;
            text-align: center;
            border: 0px;
            border-spacing: 0px;
            border-collapse: collapse;
        }

            table tr {
                border: 0px;
                background: url(images/1.jpg) repeat;
            }

        table, tr, td {
            width: 450px;
            height: 50px;
            border-spacing: 0px;
            margin: 0px;
            padding: 0px;
            border: 1px solid red;
} </style> <script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(function () { $('#tablem tr').css('background', 'url(images/1.jpg) repeat'); $('#tablem tr').mouseover(function () { $(this).css('background', 'url(images/2.jpg) repeat').siblings().css('background', 'url(images/1.jpg) repeat'); }); }); </script> <body> <table id="tablem"> <tr>    <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr>
<td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> </tr> <tr> <td>51</td> <td>52</td> <td>53</td> <td>54</td> </tr> </table> </body> </html>
复制代码

显示结果如下:

posted @   cxiaoluab  阅读(1817)  评论(1编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· DeepSeek处理自有业务的案例:让AI给你写一份小众编辑器(EverEdit)的语法着色文件
点击右上角即可分享
微信分享提示