Предположим, что у нас есть HTML и CSS:
<html>
<head>
<style type="text/css">
table tr:hover td {
background-color: #aaaaaa;
}
table tr:hover + tr td[colspan] {
background-color: #aaaaaa;
}
</style>
</head>
<body>
<table style="width: 100%" border=1>
<tr>
<td rowspan="2">One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td colspan="2">Four</td>
</tr>
<tr>
<td rowspan="2">One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td colspan="2">Four</td>
</tr>
</table>
</body>
</html>
Предварительный просмотр: http://jsfiddle.net/YEXjq/
Если пользователь поместит курсор мыши на первую строку двухрядной конфигурации, будут выделены обе «внутренние» строки. Но если он поместит курсор на вторую строку, будет выделена только вторая строка (см. пример, если описание недостаточно ясное).
Есть ли способ изменить CSS так, чтобы в последнем случае обе строки были выделены?
