2

My HTML/CSS code below works great for underlining the text in a single table cell when the mouse hovers over it but I'd like it to underline all the text in row of cells, not just the single cell. I don't need it to underline the entire row with a single line -- a line under each text item would be fine, though a single line would work too if that's easier.

I thought changing the a: to tr: would do the trick, but it had no effect.

<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; }

这是因为 text-decoration 应该应用于悬停行中的 a-tags。

于 2013-06-12T00:27:05.633 回答
1

您将需要tr:hover在 CSS 选择器中使用，但是这在非常旧的浏览器（例如 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 回答