Css 更改悬停时的列背景色

我有一张有班级的桌子。该表只有两列

是否可以选择整个列并在悬停事件中影响整个列

当该列的任何td悬停时，要更改该列中所有td的背景色

---

非常感谢

只需为每列创建一个不同的类（例如：

col1

，

col2

，

col3

，等等），然后您就可以根据列号进行选择和更改

所以（一些非常粗糙的代码）：

---

在CSS4父选择器出现之前，我认为您必须使用JavaScript。这里是一个jQuery解决方案，它不需要对表的标记进行任何更改。当一列悬停时，它会计算它在行中的位置（thisIndex），并将类“active”应用于在其父行中具有相同位置（索引）的任何列

演示：

---

这在CSS中是不可能的，根本原因是列不构成元素。您可以使用

col

元素，但它们实际上不是列元素：它们不包含作为子元素的单元格，并且只能用于设置单元格上的某些属性，因此没有悬停

col

元素的概念

因此，即使父选择器也没有帮助，因为单元格没有对应于列的父或父元素。

在中，我将用以下方式解决它：

html:

css:

-或

如果矩阵大于2x2且单元内容可编程，则

ng repeat

解决了进一步的复杂性。

在AngularJS中，我以自己的方式解决了这一问题

在
MVVM
和
MVC
两种模型中，无论是否使用控制器，我打赌你可以很容易地理解这些

带普通表格行（不带
ng repeat
）




使用AngularJS更改表列背景
.诺特：悬停{
背景：rgba（20200,0,0.5）；
}
/*如果还想更改AD行的悬停背景*/
/****然后删除上面的样式类***/
/*th:悬停{
/*背景：rgba（20200,0,0.5）*/
/*}*/
第一列
第二列
第三纵队
这是一个
这是B
这是C
这是C
这是D
这是一个
这是E
这是F
这是B
{{tdaStyle}}
{{tdbStyle}}
{{tdcStyle}}
仅使用CSS，我们无法根据前面的答案更改属性。但是我遇到了一个类似的问题，我需要更改悬停单元格列的背景色。我找到了一个解决问题的窍门

td:hover::after

您可以自己检查并尝试。
为每个列的td添加一个类。然后为每个类的所有td创建一个简单的jquery悬停函数css没有任何方法来选择“父元素”。虽然您可能需要为列使用不同的解决方案，但有一个css解决方案用于在行上悬停：@Horen ummm。。。他想要的是列，而不是行。行是easy@Neal：只需在此处添加信息，对一些不在乎数据是水平对齐还是垂直对齐的人可能有用。你的意思是使用jquery吗？我不明白。你能把它写出来吗？谢谢@JoeCoderGuy在我的回答中看到了代码（需要改进，但这是一个开始）如何在鼠标悬停时删除类，在鼠标悬停时添加类？请告诉我css4也允许在声明中使用选择器。我已经准备好把我的页面完全弄乱了！；））您可以通过将布尔数组替换为单个活动列来简化它。
    var $td = $('table td'); // Place outside hover function for performance reasons

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

        // Position of hovered column within this row
        var thisIndex = $(this).parents('tr').find('td').index( $(this) );

        // Add active class to all columns that have the same index as the hovered one
        $('table tr td:nth-child(' + (thisIndex+1) + ')').addClass('active');

    // Remove active class when mouse leaves a cell
    }).bind('mouseleave', function() {
        $td.removeClass('active');
    });

<td class='sometdstyle'
    ng-class="{ 'active': isActiveCol[0]}"
    ng-mouseover="isActiveCol[0]=true" 
    ng-mouseleave="isActiveCol[0]=false">

$scope.isActiveCol = [ false, false ];

.className td.active { background-color:black; } 

.className .sometdstyle.active { background-color:black; }

td:hover::after