jquery - 表格行的hover问题
本文介绍了jquery - 表格行的hover问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
鼠标移上去行怎么没有变色？<!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" />
<title>无标题文档</title>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
table tr:hover
{
background-color:green;}
</style>
<script type="text/javascript">
$(function(){
$('tr:even').css("background-color","orange");
$('tr:odd').css("background-color","red");
})
</script>
</head>
<body style=" overflow-x:scroll; ">
<table style="font-size:18px">
<tr>
<td>k看电话费欧非佛尔</td>
<td>k看电话费欧非佛尔</td>
<td>k看电话费欧非佛尔</td><td>k看电话费欧非佛尔</td>
</tr>
<tr>
<td>k看电话费欧非佛尔</td>
<td>k看电话费欧非佛尔</td>
<td>k看电话费欧非佛尔</td><td>k看电话费欧非佛尔</td>
</tr>
</table>
</body>
</html>
解决方案
<!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" />
<title>无标题文档</title>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
table tr:nth-child(odd){ background-color: orange;}
table tr:nth-child(even){ background-color: red;}
table tr:hover{
background-color:green;
}
</style>
</head>
<body style=" overflow-x:scroll; ">
<table style="font-size:18px">
<tr>
<td>k看电话费欧非佛尔</td>
<td>k看电话费欧非佛尔</td>
<td>k看电话费欧非佛尔</td><td>k看电话费欧非佛尔</td>
</tr>
<tr>
<td>k看电话费欧非佛尔</td>
<td>k看电话费欧非佛尔</td>
<td>k看电话费欧非佛尔</td><td>k看电话费欧非佛尔</td>
</tr>
</table>
</body>
</html>
你用js把原有的hover给覆盖了，你可以直接用css写，考虑兼容性的话就都用js写这篇关于jquery - 表格行的hover问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
