html – css边框不能在chrome中的mouseover事件上工作？

发布时间：2020-12-14 18:57:23 所属栏目：资源来源：网络整理

导读：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:

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>

鼠标悬停功能不能与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">&nbsp;</td>
    <td class="border1">&nbsp;</td>
    <td class="border1">&nbsp;</td>
    <td class="border1">&nbsp;</td>
</tr>
</table>

不需要使用mouSEOvers作为属性,只需使用css.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!