Issue
This a table that created with CSS Grid Layout, but I have a problem with it, I can't make hover state on each row.
I only want use CSS for this.
Can anyone give me a solution for this?
.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>
Solution
Here is a trick using pseudo-element. The idea is to use the element as a background and make it overflow on the left and right so that it will cover all the row. Like that if you hover on any element inside a row you change the color and it's like you changed the color of the whole row.
This trick involve few changes on the markup and also more 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>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.