css border, mouseover olayı kromda çalışmıyor mu?

Question

Mouseover işlevi Google Chrome ile çalışmıyor. Firefox ve IE ile iyi çalışıyor. Mouseover iken sınır alt kaybolmuyor. Ancak border-collapse: collapse kaldırılıyorsa iyi çalışıyor. Bu neden? Herhangi bir çözüm.

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

Tablo:

<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

böyle yapın: normal durum elemanlarında bir şeffaf sınır koydu. : hover uygulandığında, kenarlığın boyutu, öğenin kapladığı boyutu değiştirir.

örn:

.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'iniz olması gereken bir şey gibi:

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

sadece css kullanmak, nitelik olarak Mouseover'lar çalışmak gerek yok.

Düzenleme: css border-collapse özelliğini kullandığınızı farkettim. Bu, tablo kenarlarının tek bir kenarlığa mı yoksa standart HTML'de olduğu gibi ayrılıp ayrılmayacağını belirler. Bu satırı kaldırmayı veya "ayrı" olarak ayarlamayı deneyin, belki bu işe yarayacaktır.