Question

我正在尝试突出显示当前正在悬停的<th> <td>。

我可以使用以下内容突出显示第一个<tr>：

#sheet tr:hover td:first-child { color:#000; background:#EAEAEA; }

有没有办法为<th>？

执行此操作

注意 - 我正在使用<th>的范围，就像这个<th scope="col">一样，我可以利用它吗？

注意2 - 或者，有没有办法获取当前列？

Answer 1

这是一个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 here找到一个示例。

Answer 2

正如其他人所指出的那样，目前只有CSS才能实现。但是，就像编码练习一样，我尝试用css变换旋转表格然后＆＃34; unrotating＆＃34;细胞，所以你的第一个孩子最终成为列标题...

.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;
}

<强> view demo in jsfiddle

这当然只是为了好玩，应该从不进入生产阶段。您必须添加大量标记，因为如果您尝试转换表格单元格，许多浏览器会变得疯狂。

理论上，writing-mode应该更可靠，但目前只有IE9 +支持。它看起来像......

table {
  writing-mode: TB-LR;
}

table td, table th {
  writing-mode: LR-TB;
}

Answer 3

AFAIK单独使用CSS是不可能的。您可能对此感兴趣，尽管看起来评论中引用的jQuery插件更加健壮。

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

Answer 4

犹大是对的，单凭CSS是不可能的。原因是你想要定位父兄弟的孩子，目前没有办法使用CSS选择器来定位父母。

这是一个使用jQuery的解决方案，类似于Jivings示例，除了它使用您的<th>标签（而不是colgroups）并且仅突出显示<th>而不是整个列。 JS的第二位输出你正在悬停的列。

http://jsfiddle.net/tracyfu/Xhs4N/

Answer 5

没有办法使用CSS上升树，只能水平和垂直向下。在这里，您可以使用所有选择器：http://www.w3.org/TR/css3-selectors/。没有什么能上升到树上......希望源头足够可靠;）。

不幸的是，js是你唯一的解决方案。

Answer 6

如上所述，没有办法在CSS中“选择”父母。

CSS4规范提供了一个定义选择器主题的功能（允许您匹配父项）。但即使有了这个新功能，您的需求仍然过于复杂，实现它的唯一方法就是使用JavaScript。

有关此处的更多信息：

Is there a CSS parent selector?

CSS获得当前的？

6 个答案: