html

Question

マウスをホバーすると、テーブル内のセルの色の背景を変更するために、小さなインライン HTML コードを使用しています。これは特定のテーブルセルでのみ使用するため、すべてのセルでこれが必要なわけではありません。

<td  bgcolor="#000000" onmouseover="this.bgColor='white'" onmouseout="this.bgColor='black'"  >

これはうまく機能しますが、フォントの色も変更したいと思います。

そのため、デフォルトでは黒いセルに白いテキストが表示されます

しかし、マウスオーバーすると、bgcolor は白く、テキストは黒くなります。どうすればよいですか?

score 14 · Accepted Answer

イベント:hover越しに疑似クラスを使えばいいのにonmouseover

td:hover
{
   background-color:white
}

デフォルトのスタイリングには、単に使用します

td
{
  background-color:black
}

すべての要素ではなくこれらのスタイリングを使用したい場合はtd、それらの要素にクラスを指定し、このようにそのクラスにスタイリングを追加する必要があります

.customTD
{
   background-color:black
}
.customTD:hover
{
  background-color:white;
}

:nth-childセレクターを使用して td 要素を選択することもできます

score 10 · Accepted Answer

他の回答のように CSS を使用するか、onMouseOver および onMouseOut イベントを介してテキストスタイルの色を直接変更します。

onmouseover="this.bgColor='white'; this.style.color='black'"

onmouseout="this.bgColor='black'; this.style.color='white'"

score 2 · Accepted Answer

これには CSS を使用することをお勧めします。

td{
    background-color:black;
    color:white;
}
td:hover{
    background-color:white;
    color:black;
}

これらのスタイルを特定の要素セットだけに使用したい場合はtd、class (または、そのスタイルを持つ唯一の要素である場合はID ) を指定する必要があります。

例：

<td class="whiteHover"></td>

CSS

.whiteHover{
    /* Same style as above */
}

:hoverこれは、疑似クラスの MDNに関するリファレンスです。

score 0 · Accepted Answer

td:hover{ 
background-color:red;
color:white;
}