我试图创建一个表来显示个人的BMI。
作为其中的一部分，我想：on hover，for the< tr>和< col> (或< colgroup>)也被突出显示，以便交叉点更明显。
由于表格将同时包含公制和英制测量，因此：悬停不必停止在单元格(从任何方向)，实际上，如果它从一个轴延伸到另一个轴是一个奖金。我也使用XHTML 1.1 Strict doctype，如果这有什么区别？
所以…一个例子(真实表的…更大)，但这应该是有代表性的：
<script>
tr:hover {background-color: #ffa; }
colgroup:hover,col:hover {background-color: #ffa; }
</script>
… …
<table>
<col class="weight"></col><colgroup span="3"><col class="bmi"></col></colgroup>
<tr>
<th></th>
<th>50kg</th>
<th>55kg</th>
<th>60kg</th>
</tr>
<tr>
<td>160cm</td>
<td>20</td>
<td>21</td>
<td>23</td>
</tr>
<tr>
<td>165cm</td>
<td>18</td>
<td>20</td>
<td>22</td>
</tr>
<tr>
<td>170cm</td>
<td>17</td>
<td>19</td>
<td>21</td>
</tr>
</table>
我问不可能，我需要去JQuery的病房吗？
解决方法
这里是一个没有Javascript的纯CSS方法。
我使用:: before和:: after伪元素做行和列高亮。 z-index将突出显示在< tds>以防您需要处理点击事件。 position：absolute允许他们离开< td>的范围。 overflow：隐藏在< table>隐藏高亮溢出。
这是没有必要的，但我也让它选择只是行或列，当你在标题。 .row和.col类负责这一点。如果你希望简化，你可以删除它们。
这在所有现代浏览器中工作(并且通过不做任何事情在旧版本的浏览器上优雅地降级)。
演示：http://jsfiddle.net/ThinkingStiff/rUhCa/
输出：
CSS：
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td,th,.row,.col {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::before,.row:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,.col:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
HTML：
<table>
<tr>
<th></th>
<th class="col">50kg</th>
<th class="col">55kg</th>
<th class="col">60kg</th>
<th class="col">65kg</th>
<th class="col">70kg</th>
</tr>
<tr>
<th class="row">160cm</th>
<td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>
<tr>
<th class="row">165cm</th>
<td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>
<tr>
<th class="row">170cm</th>
<td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>
<tr>
<th class="row">175cm</th>
<td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>
