How to use `display: contents` for hover?

March 19, 2022

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%
}

.table {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: auto;
}

.headers {
  display: contents;
}

.row {
  display: contents;
  cursor: pointer;
}

.row:hover {
  background-color: green;
}

  <div class="table">
      <div class="headers">
        <span>column 1</span>
        <span>column 2</span>
        <span>column 3</span>
        <span>column 4</span>
        <span>column 5</span>
        <span>column 6</span>
      </div>

        <div class="row">
          <span>row 1</span>
          <span>row 1</span>
          <span>row 1</span>
          <span>row 1</span>
          <span>row 1</span>
          <span>row 1</span>
        </div>
        
        <div class="row">
          <span>row 2</span>
          <span>row 2</span>
          <span>row 2</span>
          <span>row 2</span>
          <span>row 2</span>
          <span>row 2</span>
        </div>
        
        <div class="row">
          <span>row 3</span>
          <span>row 3</span>
          <span>row 3</span>
          <span>row 3</span>
          <span>row 3</span>
          <span>row 3</span>
        </div>
  </div>

I made a table using display: grid. I want to wrap around the rows so that I could hover them later. I googled and came across display: contents that would let me do that without being a grid element. And while it did work, it wont hover for some reason. How do I achieve what I want? Basically when I hover a non-header row it should hover the entire row with colour green

>Solution :

Using display: contents kinda makes the .row itself not have a box model, so there is no actual background to color green.
But you can make the spans have a background instead. This gives you the desired result.

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%
}

.table {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: auto;
}

.headers {
  display: contents;
}

.row {
  display: contents;
  cursor: pointer;
}

.row:hover > span {
  background-color: green;
}

<div class="table">
      <div class="headers">
        <span>column 1</span>
        <span>column 2</span>
        <span>column 3</span>
        <span>column 4</span>
        <span>column 5</span>
        <span>column 6</span>
      </div>

        <div class="row">
          <span>row 1</span>
          <span>row 1</span>
          <span>row 1</span>
          <span>row 1</span>
          <span>row 1</span>
          <span>row 1</span>
        </div>
        
        <div class="row">
          <span>row 2</span>
          <span>row 2</span>
          <span>row 2</span>
          <span>row 2</span>
          <span>row 2</span>
          <span>row 2</span>
        </div>
        
        <div class="row">
          <span>row 3</span>
          <span>row 3</span>
          <span>row 3</span>
          <span>row 3</span>
          <span>row 3</span>
          <span>row 3</span>
        </div>
  </div>