html 鼠标停在表格行上面,那一行就换一个背景色。用 jquery / js 怎么做?
<tr><td></td><td></td><td></td><td></td></tr>ff,chrome都支持css里hover。即:tr:hover{backgro...
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
ff,chrome都支持css里hover。即:tr:hover{background:#ccc;}
但在ie8里面tr就不支持:hover。并且也不支持:css background-color,不知道为什么?
所以想到了用onmouseover事件。和onmouseout事件。
但不知道怎么写,求帮助。 展开
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
ff,chrome都支持css里hover。即:tr:hover{background:#ccc;}
但在ie8里面tr就不支持:hover。并且也不支持:css background-color,不知道为什么?
所以想到了用onmouseover事件。和onmouseout事件。
但不知道怎么写,求帮助。 展开
4个回答
展开全部
IE历史版本对于hover这个CSS伪类的解析只能识别在a:href标签上面,其它的一概不认识。
jQuery做过兼容了,直接jQuery("tr").hover(function(){jQuery(this).css({'background':'#ccc'});},function(){jQuery(this).css({'background':'none'});});
hover中两个function参数分别对应: mouseover和mouseout,jQuery已经做了包装。
jQuery做过兼容了,直接jQuery("tr").hover(function(){jQuery(this).css({'background':'#ccc'});},function(){jQuery(this).css({'background':'none'});});
hover中两个function参数分别对应: mouseover和mouseout,jQuery已经做了包装。
追问
ie8下面没有作用,不知道为什么,其它下面正常
展开全部
<table border=2>
<tr onmouseover="this.style.backgroundColor='#ccc';" onmouseout="this.style.backgroundColor='#fff';">
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
</table>
<tr onmouseover="this.style.backgroundColor='#ccc';" onmouseout="this.style.backgroundColor='#fff';">
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
</table>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("table tr").hover(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","");
});
});
</script>
<title>无标题文档</title></head>
<body>
<table width="347" border="1">
<tr>
<td width="59"> </td>
<td width="170"> </td>
<td width="96"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
没有ie8 我测试不了 其他的浏览器我试过了没事
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("table tr").hover(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","");
});
});
</script>
<title>无标题文档</title></head>
<body>
<table width="347" border="1">
<tr>
<td width="59"> </td>
<td width="170"> </td>
<td width="96"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
没有ie8 我测试不了 其他的浏览器我试过了没事
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
不使用CSS,你可以在js里使用document.getelementById(‘id’).dgcolor="";具体用法如下:
<body>
<table>
<tr>
<td id="td_id" onmouseover="dgcolorchange()" onmouseout="dgcolorrenew()"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script>
function dgcolorchange(){
document.getelementById('td_id').dgcolor="red";
}
function dgcolorrenew(){
document.getelementById('td_id').dgcolor="";
}
</script>
<body>
<table>
<tr>
<td id="td_id" onmouseover="dgcolorchange()" onmouseout="dgcolorrenew()"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script>
function dgcolorchange(){
document.getelementById('td_id').dgcolor="red";
}
function dgcolorrenew(){
document.getelementById('td_id').dgcolor="";
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询