代码之家 › 专栏 › 技术社区 › Bas

如何使用“显示:内容”进行悬停?

css

Bas · 技术社区 · 4 年前

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>

我用电脑做了一张桌子 display: grid .我想把这些行绕起来,以便以后可以在上面悬停。我在谷歌上搜索到 display: contents 这样我就不用做网格元素了。虽然它确实有效,但出于某种原因,它不会盘旋。我如何实现我想要的?基本上,当我悬停在一个非标题行时,它应该以绿色悬停整行

2 回复 | 直到 4 年前

christiansany 4 年前

使用 display: contents 有点像 .row 它本身没有长方体模型,因此没有实际的背景颜色为绿色。但是你可以让跨度有背景。这会给你想要的结果。

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>

Crystal 4 年前

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>