Я пытаюсь выделить <th> <td>, который в настоящее время витает.
Я могу выделить первый <tr>, используя:
#sheet tr:hover td:first-child { color:#000; background:#EAEAEA; }
Есть ли способ сделать это для <th>?
Примечание. Я использую области для <th>, например <th scope="col">, могу ли я использовать это?
Примечание 2. Или, есть способ получить текущий столбец?
Вот решение для JavaScript. Я знаю, что вы действительно хотите, чтобы CSS только отвечал на это, но поскольку это невозможно, я старался как можно больше в CSS:
Сначала ваш стол должен иметь colgroups. Один для каждого столбца.
<table class="coltest">
<colgroup><col/><col/></colgroup>
<thead><td>Left</td><td>Right</td></thead>
<tbody>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</tbody>
</table>
Я также провозгласил некоторый простой CSS для прикрепления к нашему col при зависании:
.colhover {
background-color: yellow;
}
И, наконец, jQuery загорается при наведении:
$("table.coltest td").hover(function() {
// get the colgroup at this elements specific index (col1, col2, etc)
$("col").eq($(this).index()).addClass('colhover');
}, function() {
$("col").eq($(this).index()).removeClass('colhover');
});
Это событие срабатывает, когда мышь наводится на td, делая весь colgroup, что td является частью желтого.
Здесь вы можете увидеть пример jsfiddle.
Как отмечали другие, в настоящее время это невозможно с помощью только CSS. Но, как упражнение по кодированию, я попробовал вращать таблицу с помощью css-преобразований, а затем "невращаю" ячейки, поэтому ваш первый ребенок заканчивается заголовком столбца...
.container {
float: left;
-webkit-transform: rotate(90deg) translate(-240px, -260px);
-moz-transform: rotate(90deg) translate(-240px, -260px);
-o-transform: rotate(90deg) translate(-240px, -260px);
-ms-transform: rotate(90deg) translate(-240px, -260px);
transform: rotate(90deg) translate(-240px, -260px);
color: #333;
}
table td, table th {
border: solid #eee 1px;
padding: 10px;
}
table tr:hover th:first-child { color:#000; background:#EAEAEA; }
table tr:hover td { color:#000;}
table th {
font-weight: bold;
}
table th, table td {
height: 200px;
width: 20px;
}
table th span, table td span {
display: block;
position: absolute;
-webkit-transform: rotate(-90deg) translate(-100px, 0);
-webkit-transform-origin: top left;
-moz-transform: rotate(-90deg) translate(-100px, 0);
-moz-transform-origin: top left;
-o-transform: rotate(-90deg) translate(-100px, 0);
-o-transform-origin: top left;
-ms-transform: rotate(-90deg) translate(-100px, 0);
-ms-transform-origin: top left;
transform: rotate(-90deg) translate(-100px, 0);
transform-origin: top left;
}
Это, конечно, просто для удовольствия, и никогда не попадает в производство. Вы должны добавить много разметки, потому что многие браузеры попадают в брейкеры, если вы пытаетесь преобразовать ячейки таблицы.
В теории это должно быть более надежным с writing-mode, но в настоящее время он поддерживается только IE9+. Это выглядело бы как...
table {
writing-mode: TB-LR;
}
table td, table th {
writing-mode: LR-TB;
}
AFAIK это невозможно, используя только CSS. Вам может быть интересно это, хотя похоже, что плагин jQuery, указанный в комментариях, более надежный.
Иуда прав, что это невозможно с помощью CSS. Причина в том, что вы хотите настроить таргетинг на дочерний элемент родительского родного брата, и в настоящее время нет способа настроить таргетинг на родителей с помощью селекторов CSS.
Здесь решение с использованием jQuery, похожее на пример Jivings, за исключением того, что оно использует ваши теги <th> (вместо colgroups) и выделяет только <th> вместо всего столбца. Второй бит JS выводит, какой столбец вы наводите.
Невозможно подойти к дереву с помощью CSS, только горизонтально и вертикально вниз. Здесь у вас есть все селекторы, которые вы можете использовать: http://www.w3.org/TR/css3-selectors/. Ничто не поднимается по дереву... Надеюсь, что источник достаточно правдоподобен;).
К сожалению, js - ваше единственное решение.
Как было сказано выше, нет способа "выбрать" родителей в CSS.
Спецификация CSS4 предоставляет функцию для определения темы селектора (который позволяет вам сопоставлять родителя). Но даже с этой новой функцией ваш спрос все еще слишком сложный, и единственный способ его достижения - использовать JavaScript.
Подробнее об этом здесь: