码迷,mamicode.com
首页 > Web开发 > 详细

jQuery特效 隔行变色

时间:2014-11-03 17:46:26      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:jquery

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>

 

jQuery特效 隔行变色

标签:jquery

原文地址:http://blog.csdn.net/w5167839/article/details/40744007

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!