这是一个用CSS Grid Layout创建的表,但是我遇到了问题,我无法在每一行上创建悬停状态.
我只想用CSS.
任何人都可以给我一个解决方案吗？
.table {
display: grid;
grid-template-columns: [col-start] auto [col-end];
grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end];
grid-auto-rows: auto;
grid-auto-columns: auto;
grid-gap: 1px;
}
.table>* {
background: gray;
padding: 10px;
}
.heading {
background: navy;
color: #fff;
grid-row: header;
}
<div class="table"> <div class="heading">Title 1</div> <div class="heading">Title 2</div> <div class="heading">Title 3</div> <div class="heading">Title 4</div> <div class="heading">Title 5</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 3</div> <div class="row">Row 3</div> <div class="row">Row 3</div> <div class="row">Row 3</div> <div class="row">Row 3</div> </div>
解决方法
这是使用伪元素的技巧.我们的想法是使用元素作为背景,并使其在左侧和右侧溢出,以便它将覆盖所有行.就像那样,如果你将鼠标悬停在行内的任何元素上,你就会改变颜色,就好像你改变了整行的颜色一样.
这个技巧涉及对标记的少量更改以及更多的CSS.
.table {
display: grid;
grid-template-columns: [col-start] auto [col-end];
grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end];
grid-auto-rows: auto;
grid-auto-columns: auto;
grid-gap: 1px;
overflow: hidden;
background: gray;
}
.table>* {
padding: 10px;
position: relative;
}
.heading {
background: navy;
color: #fff;
grid-row: header;
}
.row span {
position: relative;
z-index: 2;
}
.row:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -1000%;
left: -1000%;
z-index: 1;
}
.row:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -1px;
width: 1px;
z-index: 2;
background-color: #fff;
}
.row:nth-child(5n+5)::after {
bottom: -1px;
right: 0;
left: -1000%;
height: 1px;
z-index: 3;
width: auto;
top: auto;
background-color: #fff;
}
.row:hover::before {
background-color: red;
}
<div class="table"> <div class="heading">Title 1</div> <div class="heading">Title 2</div> <div class="heading">Title 3</div> <div class="heading">Title 4</div> <div class="heading">Title 5</div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> </div>
