Question

下面我的HTML / CSS代码非常适合在鼠标悬停在单个表格单元格中时强调文本，但我希望它强调单元格行中的所有文本，而不仅仅是单个单元格。我不需要用一行来为整行划线 - 每个文本项下面的一行都没问题，但如果更容易，单行也会工作。

我认为改变a：to 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>

Answer 1

试试这种风格：

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

更新要在IE中使用此功能，您必须在标记中包含DOCTTYPE。添加

<!DOCTYPE html>

在

<html>

Answer 2

这对我有用

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

这是因为文本修饰应该应用于悬停行中的a-tags。

Answer 3

您需要在CSS选择器中使用tr:hover，但这不适用于非常旧的浏览器（例如IE7及其中）。

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

演示： http://jsbin.com/agasih/1

在演示中，我已将表格中的数据行更改为更合适的<td>元素。

Answer 4

如果您需要支持较旧的IE，这是一个JavaScript解决方案。

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

在表格中加下整行

4 个答案: