1.通过使用onmouseover onmouseout方法
2.变色使用background-color(css)属性
3.变色的标签是td(tr只能使用事件,颜色样式不起作用)
第一种方法 使用样式操作
<style> .tr_color{ background-color:#ffffff; } .tr_color_hover{ background-color:blanchedalmond; } </style> <script type="text/javascript"> function mover(obj){ $(obj).children("td").each(function(){ $(this).removeClass("tr_color"); $(this).addClass("tr_color_hover"); }) } function mback(obj){ $(obj).children("td").each(function(){ $(this).removeClass("tr_color_hover"); $(this).addClass("tr_color"); })} </script> <tr onmouseover="mover(this)" onmouseout="mback(this)"> <td height="18" class="tr_color"> </tr>
第二种方法 直接对背景色操作
<script type="text/javascript"> function mover(obj){ $(obj).children("td").each(function(){ $(this).attr("bgColor","#eafcd5") }) } function mback(obj){ $(obj).children("td").each(function(){ $(this).attr("bgColor","#FFFFFF") })} </script> <tr onmouseover="mover(this)" onmouseout="mback(this)"> <td height="18"bgColor="#FFFFFF"> </tr>