在项目中有这样一个需求，在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>
显示结果如下：