您的位置:首页 > Web前端 > JQuery

jQuery特效 隔行变色

2016-02-26 12:18 435 查看
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: