纯CSS制作的IE6兼容型table hover

来源：互联网发布：长篇网络禁书百度云编辑：程序博客网时间：2024/04/30 12:02

昨天在跟龙哥做项目的时候看到了原来代码里的那个效果——

鼠标放到行上，行高亮、鼠标变pointer、字体颜色变色。

本来打算用hover直接给做了的，后来发现IE6只支持a标签的hover事件，于是决定用JS。然后首先写的是onMouseOver="this.backgroundColor='blue'"，后来发现没法写"cursor='poiter'"，于是打算用封装好的类名，遂修改为"this.className='MouseOn'"，然后增加了onMouseOut="this.className='MouseOut'"

后来发现a标签内的文字无法用MouseOver来定义，然后……在Web设计交流群里千夜小朋友的支持下把效果做了，代码如下：

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test_AHover</title>
<style type="text/css">
.MouseOn {
background:aqua;cursor:pointer
}
.MouseOn a{
display:block;color:red
}
.MouseOut {
background:white;cursor:default
}
.MouseOut td a :link{
color:black
}
table{
width:100%;background-color:white;
}
table a{
text-decoration:none;color:black
}
td {
width:100%
}
</style>
</head>

<body>
<table>
<tr onmouseover="this.className='MouseOn'" onmouseout="this.className='MouseOut'">
<td><a href="http://www.baidu.com">sadffffffffffffffffff</a></td>
</tr>
</table>
</body>

</html>