css邊框無法在chrome中的mouseover事件上工作？

鼠標懸停功能不適用於谷歌瀏覽器。與Firefox和IE工作正常。而鼠標懸停在邊界底部不會消失。但如果刪除border-collapse: collapse它工作正常。爲什麼是這樣？任何解決方案css邊框無法在chrome中的mouseover事件上工作？

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>

來源

2012-12-19 user1915224

有什麼可以阻止你添加'border1：hover {// border 2 class rules; ''？ – Andy

@ user1915224它在Chrome版本23.0下工作正常，無需刪除'border-collapse'屬性。 –

我使用的是版本23.0.1271.97米。它不適合我！ – user1915224

做這樣的：把一個透明邊框上的正常狀態的元素。應用：懸停時，邊框的大小會更改元素佔用的大小。

如：

.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分離。嘗試刪除此行或將其設置爲「單獨」，也許這將工作。

來源

2012-12-19 09:16:43 RTB

其工作僅適用於第一個。 – user1915224

RTB仍然只能在第一個工作從第二個開始，邊界底部在小工具上可見。 – user1915224

你有沒有嘗試border-bottom：0; – ATOzTOA

css邊框無法在chrome中的mouseover事件上工作？

回答

相關問題