您可以使用:before和:after
td:hover::before {
background-color: #ffa;
content: '';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -2;
}
td:hover::after {
background-color: #ffa;
content: '';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
完整的工作示例在小提琴:https://jsfiddle.net/0vm7pkj4/1/
我假设您正在尝试拥有它,以便您可以单击一行并突出显示该行,类似于列。
如果是这样,您可以尝试以下方法:
为长度与列数相等的列创建数组,对于行也是如此。 tableRowHighlights: Array<boolean> = [];
tableColumnHighlights: Array<boolean> = [];
使用false值填充它们,然后,在生成表时,为每个单元格分配一个css类,该类将根据行或列索引突出显示它:
[class.colSelected]="tableColumnHighlights[4]"
现在,当tableColumnHighlights[4]
为真时,每个指定4个的单元格将获得colSelected
类,这将是你的亮点。
然后,您可以在每个单元格上设置一个交替状态的单击侦听器:
(click)="tableColumnHighlights[4] = !tablecolumnHighlights[4]"
为行做同样的事情。如果您愿意,也可以将侦听器仅放在列的thead元素上。
希望这就是你所追求的。
试试这个代码我认为它对你有用。
var test = angular.module('test', []);
test.controller('testController', function($scope) {
var testCtrl = this;
testCtrl.data = [
{col1: '0342', col2: '234', col3: '642356', col4: 'Black', col5: 'Item 1', col6: true},
{col1: '0533', col2: '775', col3: '223542', col4: 'Green', col5: 'Item 2', col6: true},
{col1: '0973', col2: '284', col3: '997546', col4: 'Purple', col5: 'Item 3', col6: false},
{col1: '0125', col2: '997', col3: '285734', col4: 'Orange', col5: 'Item 4', col6: false},
{col1: '0432', col2: '132', col3: '996445', col4: 'White', col5: 'Item 5', col6: true}
];
testCtrl.structure = [
{field: 'col1', display: 'Col 1', class: 'col1'},
{field: 'col2', display: 'Col 2', class: 'col2'},
{field: 'col3', display: 'Col 3', class: 'col3'},
{field: 'col4', display: 'Col 4', class: 'col4'},
{field: 'col5', display: 'Col 5', class: 'col5'},
{field: 'col6', display: 'Col 6', class: 'col6'}
];
drag = event => {
var index = angular.element(event.target).scope().$index;
event.dataTransfer.setData("dragIndex", index);
};
drop = event => {
event.preventDefault();
var dropElement = angular.element(event.target);
var dragIndex = event.dataTransfer.getData("dragIndex");
var dropIndex = dropElement.scope().$index;
var column = testCtrl.structure[dragIndex];
testCtrl.structure.splice(dragIndex, 1);
var insertIndex = dragIndex > dropIndex ? dropIndex : dropIndex - 1;
if (event.offsetX > dropElement[0].scrollWidth / 2)
insertIndex++;
testCtrl.structure.splice(insertIndex, 0, column);
$scope.$digest();
};
});
.container {
text-align: center;
}
table {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(100%);
}
table, th, td {
border: 1px solid #000;
}
th, td {
padding: 10px;
}
td {
text-align: left;
}
.col1,
.col2,
.col3,
.col4,
.col5,
.col6 {
background-color: #fff;
}
.col6 {
text-align: center;
}
.col1:hover,
.col2:hover,
.col3:hover,
.col4:hover,
.col5:hover,
.col6:hover {
background-color: #DAA520;
}
<div class="container" ng-app="test" ng-controller="testController as testCtrl">
<table>
<thead>
<tr>
<th ng-repeat="header in testCtrl.structure"
class="{{header.class}}"
draggable="true"
ondragover="event.preventDefault();"
ondragstart="drag(event);"
ondrop="drop(event);">
{{header.display}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in testCtrl.data">
<td ng-repeat="body in testCtrl.structure" ng-switch="body.field" class="{{body.class}}">
<div ng-switch-when="col6">
<i class="fa" ng-class="{'fa-file': row[body.field], 'fa-file-o': !row[body.field]}"></i>
</div>
<div ng-switch-default>{{row[body.field]}}</div>
</td>
</tr>
</tbody>
</table>
</div>
尝试通过你的表类使用悬停效果,希望这会有所帮助
.MyTable td:hover {
background-color: #ccc;
}