Obramowanie css nie działa na zdarzenie mouseover w chrome?

Question

Funkcja przesunięcia kursora myszy nie działa z Google Chrome. Działa dobrze w Firefoksie i IE. Podczas przesuwania kursora dolna krawędź nie znika. Ale jeśli usunięcie border-collapse: collapse działa poprawnie. Dlaczego to? Jakiekolwiek rozwiązanie.

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; 
} 

Tabela:

<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> 

Answer 1

Czy to tak: położyć przezroczystą ramkę na normalnych elementów państwowych. Po zastosowaniu: hover, rozmiar obramowania zmienia rozmiar, który zajmuje element.

np

.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; 
} 

Twój HTML powinno być coś takiego:

<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> 

Nie trzeba pracować z mouseovers jako atrybut, wystarczy użyć CSS.

Edytuj: Zauważyłem, że używasz właściwości css border-collapse. Określa, czy obramowanie tabeli jest zwinięte w pojedynczą ramkę lub odłączone, tak jak w standardowym kodzie HTML. Spróbuj usunąć ten wiersz lub ustawić go jako "oddzielny", może to zadziała.