マウスオーバー機能がGoogle Chromeで機能していません。 FirefoxとIEでうまく動作します。マウスオーバーの間、ボーダーの底は消えません。しかし、border-collapse: collapse
を取り除くとうまくいきます。どうしてこれなの?任意の解決策。クロムのmouseoverイベントでCSS境界線が機能しませんか?
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>
あなたが 'border1:hover {// border 2 class rules; } '? – Andy
@ user1915224 Chromeのバージョン23.0の下で 'border-collapse'プロパティを削除せずに正常に動作しています。 –
私はバージョン23.0.1271.97 mを使用しています。それは私と一緒に働いていない! – user1915224