biên giới css không hoạt động trên sự kiện di chuột trong chrome?

Question

Chức năng di chuột không hoạt động với Google Chrome. Làm việc tốt với Firefox và IE. Trong khi di chuột qua phần dưới của đường biên thì không biến mất. Nhưng nếu loại bỏ border-collapse: collapse nó hoạt động tốt. Tại sao điều này? Bất kì giải pháp nào.

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

Bảng:

<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

Làm điều đó như thế này: đặt một biên giới trong suốt trên các yếu tố trạng thái bình thường của bạn. Khi: hover được áp dụng kích thước của đường viền thay đổi kích thước phần tử chiếm.

ví dụ:

.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 của bạn nên được một cái gì đó như:

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

Không cần phải làm việc với các di chuột như một thuộc tính, chỉ cần sử dụng css.

Edit: tôi đã nhận thấy rằng bạn đang sử dụng css border-collapse tài sản. Điều này đặt xem các đường viền bảng có được thu gọn thành một đường viền đơn hay tách ra như trong HTML chuẩn hay không. Hãy thử xóa dòng này hoặc đặt nó thành "riêng biệt", có thể điều này sẽ hoạt động.