jquery鼠标经过效果

这个单单用js可以很简单的做出来，但有时候考虑到table/div奇偶行不同效果时可能要比用jquery多写点代码，等等，jquery做本地特效的更易用，不用再考虑浏览器版本等还是用jquery方便。所以还是考虑学习些jquery。

1.下面这个为控制div，当鼠标经过时改变div的class，划离时移除class。

<mce:script type="text/javascript" src="../jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("div").mouseover(function(){$(this).addClass("over");$(this).html("鼠标经过了这里！");}) .mouseout(function(){$(this).removeClass("over");$(this).html("");}) }); // --></mce:script> <mce:style><!-- div{width:100%;height:60px;border:1 solid #ffe9e9;} div.over{background:#ffe9e9;line-height:100px;font-size:30px;color:green;text-align:center;border:1 solid red;} --></mce:style><style mce_bogus="1">div{width:100%;height:60px;border:1 solid #ffe9e9;} div.over{background:#ffe9e9;line-height:100px;font-size:30px;color:green;text-align:center;border:1 solid red;}</style> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

---

 

2.下面这个为控制table，思路和上边一样：

<mce:script type="text/javascript" src="../jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ //$("tr:even").css("background","#ffe9e9"); $("td").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over")}); }); // --></mce:script> <mce:style><!-- td{border:1 solid #e9e9ff;width:50px;text-align:center} td.over{border:1 solid #e9e9ff;width:50px;text-align:center;color:red;border:1 solid red;background:#ffe9e9;} --></mce:style><style mce_bogus="1">td{border:1 solid #e9e9ff;width:50px;text-align:center} td.over{border:1 solid #e9e9ff;width:50px;text-align:center;color:red;border:1 solid red;background:#ffe9e9;}</style> <table border=0 cellpadding=8 cellspacing=0> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> <td>45</td> </tr> <tr> <td>51</td> <td>52</td> <td>53</td> <td>54</td> <td>55</td> </tr> <tr> <td>61</td> <td>62</td> <td>63</td> <td>64</td> <td>65</td> </tr> <tr> <td>71</td> <td>72</td> <td>73</td> <td>74</td> <td>75</td> </tr> </table>