html如何悬停出现多个下列表,HTML：悬停表列[复制](html: hover table column [duplicate]...

这个问题已经在这里有一个答案：的cols，colgroups和css：悬停psuedoclass 5个回答

我怎样才能改变一个HTML表格列的背景列当鼠标移动到它？

优选的CSS只。

Answer 1:

只对单元格或行，对不起。 例如

td {

background-color: blue;

}

td:hover {

background-color: red;

}

还有的JavaScript的解决方案，但没有在CSS中，现在会做你想要，因为选择的局限性是什么。

td /* all cells */

{

background-color: blue;

}

tr /* all rows */

{

background-color: pink;

}

/* nothing for all columns */

Answer 2:

这可以通过使用CSS与没有使用Javascript来完成。

我用了::after伪元素做突出。 z-index不断下面的高亮的情况下，你需要处理单击事件。 使用大量的高度使得它能够覆盖整个列。 overflow: hidden在

演示： http://jsfiddle.net/ThinkingStiff/2XeYe/

输出：

CSS：

table {

border-spacing: 0;

border-collapse: collapse;

overflow: hidden;

z-index: 1;

}

td, th {

cursor: pointer;

padding: 10px;

position: relative;

}

td:hover::after {

background-color: #ffa;

content: '\00a0';

height: 10000px;

left: 0;

position: absolute;

top: -5000px;

width: 100%;

z-index: -1;

}

HTML：

	50kg	55kg	60kg	65kg	70kg
160cm	20	21	23	25	27
165cm	18	20	22	24	26
170cm	17	19	21	23	25
175cm	16	18	20	22	24

Answer 3:

我有一个更简单的解决方案(活生生的例子： http://jsfiddle.net/q3HHt/1/ )

HTML：

CSS：

table, td {

border: 1px solid black;

}

td {

width: 40px;

height: 40px;

}

.highlighted {

background-color: #348A75;

}

jQuery的：

$('td').hover(function() {

var t = parseInt($(this).index()) + 1;

$('td:nth-child(' + t + ')').addClass('highlighted');

},

function() {

var t = parseInt($(this).index()) + 1;

$('td:nth-child(' + t + ')').removeClass('highlighted');

});

活生生的例子： http://jsfiddle.net/q3HHt/1/

Answer 4:

只是为了扩展穆罕默德答案( https://stackoverflow.com/a/11828637/1316280 )，如果你想突出的cols只有在实际的表，改变jQuery的代码部分：这是的jsfiddle特异性只有实际的表

jQuery的

$('td').hover(function() {

var t = parseInt($(this).index()) + 1;

$(this).parents('table').find('td:nth-child(' + t + ')').addClass('highlighted');

},

function() {

var t = parseInt($(this).index()) + 1;

$(this).parents('table').find('td:nth-child(' + t + ')').removeClass('highlighted');

});

的jsfiddle： http://jsfiddle.net/q3HHt/123/

Answer 5:

我不认为这是一个干净的HTML + CSS的方式来做到这一点。 JavaScript是一种替代，例如jQuery的tableHover插件

Answer 6:

我有一个类似的问题，我有太多的列在屏幕上显示。 VIA PHP，我打开每一行到1×列的表。 因此，n行= N表。 然后我嵌套在一个主表内的每个表。 这样做让我打电话给TD：从我的样式表徘徊。 由于每个TD保持的表，它具有突出，当我在它的鼠标一列相同的效果。

Answer 7:

你可以尝试尝试

标签和col:hover { background: red; } col:hover { background: red; }风格，但我怀疑这会工作。 无论如何，这肯定是行不通的在旧版本的MSIE，所以你需要在为了做到这一点的JavaScript。

Answer 8:

您可以突出整行使用纯CSS：

tr td {background-color: red;}

tr:hover td {background-color: blue;}

实现了一列这种效果是不可能用这种方法，因为细胞(TD)是行(TR)的孩子，不是列。

为了使其在IE7 +工作，确保添加DOCTYPE声明(你应该总是做反正:))。

文章来源: html: hover table column [duplicate]