jQuery特效隔行变色

全栈程序员站长

发布于 2022-07-08 20:07:32

5.1K0

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是全栈君。

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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/115890.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年1月2，如有侵权请联系 cloudcommunity@tencent.com 删除

https