There is a requirement in the project that when you move the mouse in the table, the row of the mouse is highlighted, the other rows are displayed normally, and a simulation is done.
The specific code is as follows:
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title></title> <styletype= "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> <Scriptsrc= "Jquery-1.10.2.js"></Script> <Scripttype= "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> <TableID= "Tablem"> <TR><TD>11</TD> <TD>12</TD> <TD>13</TD> <TD>14</TD> </TR> <TR> <TD>21st</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>
The results appear as follows: