सीएसएस सीमा क्रोम में माउसओवर घटना पर काम नहीं कर रही है?

Question

माउसओवर फ़ंक्शन Google क्रोम के साथ काम नहीं कर रहा है। फ़ायरफ़ॉक्स और आईई के साथ ठीक काम करना। जबकि माउसओवर सीमा तल गायब नहीं हो रहा है। लेकिन अगर border-collapse: collapse को हटा रहा है तो यह ठीक काम कर रहा है। ऐसा क्यों है? कोई भी समाधान।

सीएसएस:

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> 

Answer 1

इसे इस तरह करें: अपनी सामान्य स्थिति तत्वों पर एक पारदर्शी सीमा डाल दिया। जब: होवर लागू होता है तो सीमा का आकार तत्व को आकार में बदल देता है।

जैसे:

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

विशेषता के रूप में माउसओवर के साथ काम करने के लिए, बस सीएसएस का उपयोग की आवश्यकता नहीं है।

संपादित करें: मैंने देखा है कि आप सीएसएस border-collapse संपत्ति का उपयोग कर रहे हैं। यह सेट करता है कि तालिका सीमाएं एक ही सीमा में ध्वस्त हो गई हैं या मानक HTML में अलग हैं। इस लाइन को हटाने का प्रयास करें या इसे "अलग" पर सेट करें, शायद यह काम करेगा।