css边框不能处理chrome中的mouseover事件？

Question

鼠标悬停功能不适用于Google Chrome.与Firefox和IE一起正常工作.鼠标悬停在边框底部并没有消失.但如果删除border-collapse: collapse它的工作正常.为什么是这样？任何解决方案

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'">&nbsp;</td>
    <td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'">&nbsp;</td>
    <td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'">&nbsp;</td>
    <td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'">&nbsp;</td>
  </tr>
</table>

Answer 1

这样做:在正常状态元素上放置透明边框.当应用:hover时,边框的大小会更改元素占用的大小.

例如:

.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">&nbsp;</td>
    <td class="border1">&nbsp;</td>
    <td class="border1">&nbsp;</td>
    <td class="border1">&nbsp;</td>
</tr>
</table>

无需使用鼠标悬停作为属性,只需使用css即可.

编辑:我注意到你正在使用css border-collapse属性.这将设置表格边框是折叠为单个边框还是分离为标准HTML.尝试删除此行或将其设置为"分离",也许这将有效.