问题：#mytable tr:hover{ background:red; }为何不进行显示，求个会Css和html的大神，帮忙解答下
<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title><style>body{backgr...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{
background:#e6eae9;
}
#mytable{
width:700px;
margin:0px;
padding:0px;
border:1px solid #c1dad7;
}
#mytable caption{
font-weight:blod;
font-family:"黑体";
font-size:30px;
margin:5px 0;
text-align:center;
}
#mytable th{
color:#4f6b72;
background:#cae8ea;
padding:6px 6px 6px 12px;
letter-spacing:2px;
text-align:center;
border:1px solid #c1dad7;
}
#mytable td{
text-align:center;
font-family:"宋体";
background:#fff;
border:1px solid #c1dad7;
color:#4f6b72;
}
#mytable tr:hover{
background:red;
}
</style>
</head>
<body>
<table id="mytable" >
<caption id="cap">财经2000级毕业生通讯录</caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">出生日期</th>
<th scope="col">电话</th>
<th scope="col">单位</th>
</tr>
<tr class="spec">
<th scope="row">王明</th>
<td>1978.01.04</td>
<td>13814263166</td>
<td>铁道部</td>
</tr>
<tr class="specalt">
<th scope="row">小苏</th>
<td>1978.01.04</td>
<td>13814263166</td>
<td>铁道部</td>
</tr>
</table>
</body>
</html> 展开
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{
background:#e6eae9;
}
#mytable{
width:700px;
margin:0px;
padding:0px;
border:1px solid #c1dad7;
}
#mytable caption{
font-weight:blod;
font-family:"黑体";
font-size:30px;
margin:5px 0;
text-align:center;
}
#mytable th{
color:#4f6b72;
background:#cae8ea;
padding:6px 6px 6px 12px;
letter-spacing:2px;
text-align:center;
border:1px solid #c1dad7;
}
#mytable td{
text-align:center;
font-family:"宋体";
background:#fff;
border:1px solid #c1dad7;
color:#4f6b72;
}
#mytable tr:hover{
background:red;
}
</style>
</head>
<body>
<table id="mytable" >
<caption id="cap">财经2000级毕业生通讯录</caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">出生日期</th>
<th scope="col">电话</th>
<th scope="col">单位</th>
</tr>
<tr class="spec">
<th scope="row">王明</th>
<td>1978.01.04</td>
<td>13814263166</td>
<td>铁道部</td>
</tr>
<tr class="specalt">
<th scope="row">小苏</th>
<td>1978.01.04</td>
<td>13814263166</td>
<td>铁道部</td>
</tr>
</table>
</body>
</html> 展开
2个回答
展开全部
1、IE6下tr不支持伪类:hover
2、对于支持伪类的其他浏览器，依然看不到你要的效果，是因为td和th标签，你设置了背景色，tr的背景色直接被盖住，所以也看不到效果。
解决方法：
1、更换高版本的浏览器，或者用js动态来实现效果
2、将th和td的颜色，设置在tr上，然后再设置tr:hover就行了。
2、对于支持伪类的其他浏览器，依然看不到你要的效果，是因为td和th标签，你设置了背景色，tr的背景色直接被盖住，所以也看不到效果。
解决方法：
1、更换高版本的浏览器，或者用js动态来实现效果
2、将th和td的颜色，设置在tr上，然后再设置tr:hover就行了。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
