How to make hover state on row table with CSS grid layout

Question

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

Answer 1

Since you are treating this as a table, where the elements stay in the same row, you can also wrap each row in a DIV with "display" set to "contents." This forms an innocuous parent element that you use for hover, and then style the child elements. (display: contents is not yet supported in Edge, though.)

.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 .row, .table .heading{
  padding: 10px;
  position: relative;
}

.heading {
  background: navy;
  color: #fff;
  grid-row: header;
}

.row span {
  position: relative;
  z-index: 2;
}

.rowWrapper{
  display: contents;
}

.rowWrapper:hover > div{
  background-color: orange;
}

        
Title 1
        
Title 2
        
Title 3
        
Title 4
        
Title 5
      
    

        
Row 1
        
Row 1
        
Row 1
        
Row 1
        
Row 1
    

    

        
Row 2
        
Row 2
        
Row 2
        
Row 2
        
Row 2
    
      
    

        
Row 3
        
Row 3
        
Row 3
        
Row 3
        
Row 3