マウスポイント時に行がハイライト表示する表

Posted by

スタイルシートでhoverを利用して作成しています。

#highlight{
width:600px;
color : black;
line-height : 1.3;
}
#highlight td{
padding : 10px 5px;
background-color : white;
border:1px solid darkgreen;
font-size:14px;
color : black;
line-height : 1.5;
}
#hi-title{
width:110px;
font-size:14px;
text-indent : 10pt;
}
#highlight tr:hover td{
background: darkgreen;
color: white;
}

htmlファイルの実装側はこんな感じです。

<table id="highlight">
<tbody>
<tr>
<td id="hi-title">2の倍数</td>
<td>1の位が0,2,4,6,8の偶数</td>
</tr>
</tbody>
</table>

見本:こんな感じ


Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です