Css border не работает над событием mouseover в chrome?

Функция Googleover не работает с 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>

Ответы

Ответ 1

Сделайте это так: поставьте прозрачную рамку на свои обычные элементы состояния. Когда применяется: 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. Попробуйте удалить эту строку или установить ее "отдельно", возможно, это сработает.