注册 登录
编程论坛 WEB前端(UI)

CSS hover 的效果显示不出来[今天悬赏]

发布于 2010-06-22 16:49, 1816 次点击
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.
<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
tr:hover {color:pink}
</style>
</head>

<body>
<table id="customers">
<tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
只是一些地方可以罢了,有谁可以帮忙解答一下吗?


[ 本帖最后由 pnovus 于 2010-6-22 16:53 编辑 ]
4 回复
#2
zmh8862010-06-22 18:30
http://topic.
#3
2010-06-23 10:03
楼上的,这个只是浏览器不支持的问题。。。而且还是不正确的
hover效果是可以出现在IE的,
可能是table的structure还是什么的。。。

有没有高手指点一下?

以下的代码就可以出现在IE...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.
<html >
<head>
<title>tr 2</title>
<style>
tr { background: white; }
tr.alt { background: yellow; }
tr:hover {background: pink;}
</style>

</head>

<body>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Place of residence</th>
  </tr>
  <tr>
    <td>P</td>
    <td>O</td>
  </tr>
  <tr class="alt">
    <td>V</td>
    <td>B</td>
  </tr>
  <tr>
    <td>L</td>
    <td>L</td>
  </tr>
  <tr class="alt">
    <td>E</td>
    <td>P</td>
  </tr>
</table>
</body>
</html>
#4
poyexyp2010-06-23 10:31
并非所有ie都支持任何元素的伪类:hover,ie6以下只支持超链接的伪类a:hover,所以上面的两个例子在ie6下都是看不到鼠标效果的。
LZ问的顶楼的间隔失效问题是另一回事,是因为css里声明的时候对#customers下含.alt的tr做了特殊样式,而对一般的tr声明了:hover效果,优先级是按照特殊化声明的优先的,所以即使tr:hover写在了下面还是无用的。只要对hover也特异化声明就可以了#customers tr:hover{.............}
#5
2010-06-23 10:45
oh yea~
终于有答案了,
多谢各位高手!!!
1