10

マウスオーバー機能は 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>
4

1 に答える 1

6

次のようにします: 通常状態の要素に透明な境界線を置きます。: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 を使用するだけです。

編集: cssborder-collapseプロパティを使用していることに気付きました。これは、テーブルの境界線を 1 つの境界線に折りたたむか、標準の HTML のように分離するかを設定します。この行を削除するか、「分離」に設定してみてください。おそらくこれでうまくいくでしょう。

于 2012-12-19T09:16:43.340 に答える