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

这样做：在正常状态元素上放置透明边框。当应用：悬停时，边框的大小会改变元素占用的大小。

例如：

.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。尝试删除此行或将其设置为“单独”，也许这将有效。

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

1 个答案: