How to use `display: contents` for hover?-CodePudding

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 >
      <div >
        <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 >
          <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 >
          <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 >
          <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

CodePudding user response：

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 >
      <div >
        <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 >
          <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 >
          <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 >
          <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>

CodePudding user response：

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 >
      <div >
        <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 >
          <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 >
          <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 >
          <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>