※ ChatGPTを利用し、要約された質問です(原文:マウスカーソルを乗せた時にテーブルの行の色を変える)
マウスカーソルを乗せた時にテーブルの行の色を変える
このQ&Aのポイント
テーブルの行の色を変える方法について解説します。マウスカーソルを乗せた時に行の色を変えるためにはCSSの:hover疑似クラスを使用します。
具体的には、table要素のtr要素に:hover疑似クラスを適用し、背景色を変更するスタイルを指定します。
しかし、質問文章のコードでは正しく動作していないようです。正しい動作をするためには、CSSファイルとjQueryライブラリの読み込み、およびスタイルの適用が必要です。
マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて
以下のようにCSSとHTMLを書いてみました。
しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。
【CSS】
table tr:hover {
background:red;
}
【HTML】
<html>
<head>
<script type="text/javascript" src="./jquery-1.9.1.js"></script>
<link rel="stylesheet" href="test.css" type="text/css">
<script>
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>名前</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>3000</td>
</tr>
<tr>
<td>xyz</td>
<td>100</td>
</tr>
<tr>
<td>myk</td>
<td>20000</td>
</tr>
</tbody>
</table>
</body>
</html>
補足
ご回答ありがとうございます。 background-color を指定してみたのですが結果は同じでした。 当方、IE9を使用しているのですが以下の一文をHTML の先頭に付加することで色を変えることができました <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">