鼠标悬停功能不适用于 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'"> </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>
最佳答案
这样做:在您的正常状态元素上放置一个透明边框。 当应用 :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"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
</tr>
</table>
无需将鼠标悬停作为属性,只需使用 css。
编辑:我注意到您正在使用 css border-collapse
属性。这设置表格边框是折叠成单个边框还是像标准 HTML 中那样分离。尝试删除此行或将其设置为“separate”,也许这会起作用。
关于html - css 边框不适用于 chrome 中的鼠标悬停事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13948813/