Chrome浏览器中鼠标悬停时CSS边框无法正常工作？

Question

Chrome浏览器中鼠标悬停时CSS边框无法正常工作？

10

鼠标悬停功能在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>

- user1915224

2

你有什么阻止你添加 border1:hover { // border 2 class rules; } 的吗？ - Andy

2

@user1915224，在Chrome版本23.0下，我的代码没有移除border-collapse属性也能正常工作。 - 000

我正在使用版本号为23.0.1271.97 m的软件，但它对我来说无法正常工作！！！ - user1915224

1

@user1915224 你期望得到什么，又实际得到了什么？ - Viktor S.

FAngel，我想要的是问题中指定的内容。我希望在鼠标悬停时获得底部边框0像素。 - user1915224

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RTB · Accepted Answer

这样做：在普通状态元素上加一个透明的边框。当应用: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中的边框。尝试删除此行或将其设置为“separate”，也许这将起作用。