CSS：
html,body{
margin: 0;
padding: 0;
}
.table {
border-collapse: collapse;
}
.border {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border1 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border2 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
padding: 1px;
}
表：
<table width="1024" border="0" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1" onmouSEOver="this.className='border2'" onmouSEOut="this.className='border1'"> </td>
<td class="border1" onmouSEOver="this.className='border2'" onmouSEOut="this.className='border1'"> </td>
<td class="border1" onmouSEOver="this.className='border2'" onmouSEOut="this.className='border1'"> </td>
<td class="border1" onmouSEOver="this.className='border2'" onmouSEOut="this.className='border1'"> </td>
</tr>
</table>
鼠标悬停功能不能与Google Chrome一起使用.使用Firefox和IE工作正常.而鼠标悬停在边框底部并没有消失.但如果删除边界崩溃：崩溃它的工作正常.为什么是这样？任何解决方案
解决方法
这样做：在您的正常状态元素上放置透明边框.
当应用：悬停时,边框的大小会更改元素占用的大小.
当应用：悬停时,边框的大小会更改元素占用的大小.
例如：
.border1
{
border:1px solid #000000;
border-left:1px solid transparent;
border-right:1px solid transparent;
background-color: #FFFFFF;
}
.border1:hover
{
border:1px solid transparent;
border-top:1px solid #000000;
padding:1px;
background-color: #deecf9;
}
你的HTML应该是这样的：
<table width="1024" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
</tr>
</table>
编辑：我注意到你正在使用css border-collapse属性.这将设置表格边框是否折叠为单个边框或分离,如标准HTML.尝试删除此行或将其设置为“分离”,也许这将工作.
