我有一个网格模拟使用Bootstrap从div制作的假表。我知道如何更改row上hover的背景颜色。我不知道的是如何在悬停时更改div列的背景。我尝试了一些东西，但它没有用。任何想法都赞赏。
我还做了 JSFiddle 。
到目前为止我的代码：
.fake_table{
background: #fdf6e3;
overflow: hidden;
}
.istoric_row:hover{
background: #FEFAEE;
}
.td, .th {
position: relative;
}
.td:hover::after,
.th:hover::after {
content: "";
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="fake_table istoric_calendar">
<div class="ft_header">
<div class="clearfix">
<div class="col-md-4 th">Client</div>
<div class="col-md-2 th">Added</div>
<div class="col-md-6 th">
<div class="clearfix">
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
L
</div>
<div class="col-xs-3">
M
</div>
<div class="col-xs-3">
Mi
</div>
<div class="col-xs-3">
J
</div>
</div>
</div>
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
V
</div>
<div class="col-xs-3">
S
</div>
<div class="col-xs-3">
D
</div>
<div class="col-xs-3">
8
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ft_content mCustomScrollbar _mCS_1 mCS_no_scrollbar">
<div id="mCSB_1" class="mCustomScrollBox mCS-dark mCSB_vertical mCSB_inside" style="max-height: none;" tabindex="0">
<div id="mCSB_1_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">
<div class="clearfix istoric_row">
<div class="col-md-4 td">Lorem ipsum dolor / Lorem ipsum dolor / Lorem ipsum dolor</div>
<div class="col-md-2 td">6 months ago</div>
<div class="col-md-6 td">
<div class="clearfix">
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
1
</div>
<div class="col-xs-3">
2
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs-3">
4
</div>
</div>
</div>
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
5
</div>
<div class="col-xs-3">
6
</div>
<div class="col-xs-3">
7
</div>
<div class="col-xs-3">
8
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix istoric_row">
<div class="col-md-4 td">Lorem ipsum dolor / Lorem ipsum dolor / Lorem ipsum dolor</div>
<div class="col-md-2 td">6 months ago</div>
<div class="col-md-6 td">
<div class="clearfix">
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
1
</div>
<div class="col-xs-3">
2
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs-3">
4
</div>
</div>
</div>
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
5
</div>
<div class="col-xs-3">
6
</div>
<div class="col-xs-3">
7
</div>
<div class="col-xs-3">
8
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix istoric_row">
<div class="col-md-4 td">Lorem ipsum dolor / Lorem ipsum dolor / Lorem ipsum dolor</div>
<div class="col-md-2 td">6 months ago</div>
<div class="col-md-6 td">
<div class="clearfix">
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
1
</div>
<div class="col-xs-3">
2
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs-3">
4
</div>
</div>
</div>
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
5
</div>
<div class="col-xs-3">
6
</div>
<div class="col-xs-3">
7
</div>
<div class="col-xs-3">
8
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix istoric_row">
<div class="col-md-4 td">Lorem ipsum dolor / Lorem ipsum dolor / Lorem ipsum dolor</div>
<div class="col-md-2 td">6 months ago</div>
<div class="col-md-6 td">
<div class="clearfix">
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
1
</div>
<div class="col-xs-3">
2
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs-3">
4
</div>
</div>
</div>
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
5
</div>
<div class="col-xs-3">
6
</div>
<div class="col-xs-3">
7
</div>
<div class="col-xs-3">
8
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix istoric_row">
<div class="col-md-4 td">Lorem ipsum dolor / Lorem ipsum dolor / Lorem ipsum dolor</div>
<div class="col-md-2 td">6 months ago</div>
<div class="col-md-6 td">
<div class="clearfix">
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
1
</div>
<div class="col-xs-3">
2
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs-3">
4
</div>
</div>
</div>
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
5
</div>
<div class="col-xs-3">
6
</div>
<div class="col-xs-3">
7
</div>
<div class="col-xs-3">
8
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-dark mCSB_scrollTools_vertical" style="display: none;">
<div class="mCSB_draggerContainer">
<div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; height: 0px; top: 0px;">
<div class="mCSB_dragger_bar" style="line-height: 30px;"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</div>
<div class="clearfix total_saptamanal">
<div class="col-md-4 th">Total 123</div>
<div class="col-md-2 th">Total daily 22</div>
<div class="col-md-6 th">
<div class="clearfix">
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
23
</div>
<div class="col-xs-3">
44
</div>
<div class="col-xs-3">
52
</div>
<div class="col-xs-3">
21
</div>
</div>
</div>
<div class="col-xs-6">
<div class="clearfix">
<div class="col-xs-3">
55
</div>
<div class="col-xs-3">
33
</div>
<div class="col-xs-3">
11
</div>
<div class="col-xs-3">
8
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
您可以为其提供额外的课程甚至是ID，只需在background-color上应用.extraClass:hover即可。您也可以将该类添加到多个列中。
答案 1 :(得分：0)