2

以下の HTML/CSS コードは、マウスがその上に置かれたときに単一のテーブル セル内のテキストに下線を引くのに最適ですが、単一のセルだけでなく、セルの行内のすべてのテキストに下線を引きたいと思います。行全体に 1 行で下線を引く必要はありません。各テキスト項目の下に 1 行でも構いませんが、簡単であれば 1 行でも構いません。

a: を tr: に変更するとうまくいくと思いましたが、効果はありませんでした。

<html>
	<head>
		<title>Project Index</title>
    <style type="text/css">

    a:link {text-decoration:none;}
    a:hover {text-decoration: underline; }

    </style>
	</head>
	<body>
		<h2 style="text-align: center;">
			Project Index</h2>
		<h3 style="text-align: center;">
			2013-06-11 18:44</h3>
		<table align="left" border="0" cellpadding="1" cellspacing="1" height="29" width="728" style="font-family:arial,helvetica,sans-serif;font-size: 12px;">
			<tbody>
				<tr>
					<th scope="col">
						Project
						<hr />
					</th>
					<th scope="col">
						Activity
						<hr />
					</th>
					<th scope="col">
						Items
						<hr />
					</th>
				</tr>
				<tr>
 					<th scope="col" style="text-align: left;">
						<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 1.html">Test Project 1 </a></th>
					<th scope="col" style="text-align: left;">
						<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 1.html">2013-06-09 17:31</a></th>
					<th scope="col" style="text-align: left;">
						<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 1.html">RFI:5 CCO:2 </a></th>
				</tr>
				<tr>
 					<th scope="col" style="text-align: left;">
						<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 2.html">Test Project 2 </a></th>
					<th scope="col" style="text-align: left;">
						<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 2.html">2013-06-06 09:06</a></th>
					<th scope="col" style="text-align: left;">
						<a style="color:#0000cd;" href="C:\Users\Caterpillar\Google Drive\SPDA\Standards\Project Reports\Full Reports\Test Project 2.html">RFI:2 </a></th>
				</tr>
			</tbody>
		</table>
	</body>
</html>

4

4 に答える 4

3

このスタイルを試してください:

tr a {text-decoration:none;}
tr:hover a {text-decoration: underline;}

更新IE でこれを機能させるには、マークアップに DOCTTYPE を含める必要があります。追加

<!DOCTYPE html>

前

<html>
于 2013-06-12T00:28:08.067 に答える
1

これは私のために働く

tr:hover a {text-decoration: underline; }

これは、ホバーされた行の a-tags に text-decoration を適用する必要があるためです。

于 2013-06-12T00:27:05.633 に答える
1

CSS セレクターで使用する必要がありますがtr:hover、これは非常に古いブラウザー (IE7 以下など) では機能しません。

tr:hover a { text-decoration: underline; }

デモ: http://jsbin.com/agasih/1

デモでは、テーブルのデータ行をより適切な<td>要素に変更しました。

于 2013-06-12T00:27:34.560 に答える
0

古い IE のサポートが必要な場合の JavaScript ソリューションは次のとおりです。

http://css-tricks.com/row-and-column-highlighting/

于 2013-06-12T00:29:08.517 に答える