我有一个简单的代码来设置表格的样式，如 fiddle 中所示，我的问题是悬停在表头上方，它正在处理 row 悬停所需的样式，当我悬停在 head 上时，文本变成下划线，而我不需要发生任何事情。
我的代码中是否有任何错误，以至于表头响应仅分配给该行的 hover 效果？
<!DOCTYPE html>
<html>
<head>
<title>Table styling</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
table, th, td {
font-family: "Trebuchet MS", Arial, sans-serif;
}
caption {
font-size: 150%;
font-weight: bold;
margin: 5px;
}
table {
width: 750px;
border-collapse: collapse;
margin:50px auto;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
tfoot td{
background: green;
color: white;
font-weight: bold;
}
tr:hover {
color: yellow;
background: orangered;
text-decoration: underline !important;
}
</style>
<body>
<table>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Twitter</th>
</thead>
<tbody>
<tr>
<td data-column="First Name">James</td>
<td data-column="Last Name">Matman</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@james</td>
</tr>
<tr>
<td data-column="First Name">Andor</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Designer</td>
<td data-column="Twitter">@andornagy</td>
</tr>
<tr>
<td data-column="First Name">Tamas</td>
<td data-column="Last Name">Biro</td>
<td data-column="Job Title">Game Tester</td>
<td data-column="Twitter">@tamas</td>
</tr>
<tr>
<td data-column="First Name">Zoli</td>
<td data-column="Last Name">Mastah</td>
<td data-column="Job Title">Developer</td>
<td data-column="Twitter">@zoli</td>
</tr>
<tr>
<td data-column="First Name">Szabi</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@szabi</td>
</tr>
</tbody>
<tfoot>
<td colspan="3">Total</td>
<td >4</td>
</tfoot>
</table>
</body>
</html>
最佳答案
您的 CSS 告诉每一行在悬停时都有下划线。如果您只想对正文中的行产生这种效果，请将 CSS 更改为:
tbody tr:hover {
text-decoration: underline !important;
}
关于css - 表头是否响应分配给表行的悬停？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40840904/