html - 为什么当我将鼠标悬停在我的一些 CSS 网格框上时它们会展开？

Question

我是 CSS 网格的新手，但我想尝试一下。我有一个带有 3x3 框的网格。当我将鼠标悬停在一个盒子上时，它应该是完整的行......但这不起作用。

当我将鼠标悬停在1它上面时，它会完全填满屏幕，当我将鼠标悬停在3我的屏幕上时，它开始闪烁并且它不工作。

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, minmax(100px, auto));
  grid-template-rows: repeat(3, minmax(100px, auto));
}

[class^="item"] {
  text-align: center;
  box-sizing: border-box;
  padding: 10%;
  font-size: 5em;
  color: #0580d5;
  transition: .2s;
}

[class^="item"]:hover {
  grid-column-start: 1;
  grid-column-end: 4;
}

.item-1 {
  /*grid-area: 1 / 2 / span 2 / span 2;*/
}

.container>div {
  border: 2px solid #0580d5;
  background-color: rgba(40, 180, 240, .3);
  border-radius: 5px;
}

@media only screen and (min-width: 789px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

<div class="container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
  <div class="item-7">7</div>
  <div class="item-8">8</div>
  <div class="item-9">9</div>
</div>

标签： htmlcssalignmentcss-grid

Answer 1

这是一个绕过抖动悬停的技巧-用于对行进行分组并以列为目标。display: contentsnth-child(3n+m)

最后，为了只显示悬停在一行中的项目，display属性被摆弄 - 在下面的演示中查看更多内联解释：

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.row {
  display: contents;
}

[class^="item"] { /* fix first column */
  grid-column: 1;
}

[class^="item"]:nth-child(3n+2) { /* fix second column */
  grid-column: 2;
}

[class^="item"]:nth-child(3n+3) { /* fix third column*/
  grid-column: 3;
}


[class^="item"]:hover { /* span 3 columns on hover of any cell */
  grid-column: 1 / 4;
  display: block !important; /* Show hovered item */
}

.row:nth-child(1):hover div { /* fix row on hover first row */
  grid-row: 1;
  display: none;
}

.row:nth-child(2):hover div { /* fix row on hover second row */
  grid-row: 2;
  display: none;
}

.row:nth-child(3):hover div { /* fix row on hover third row */
  grid-row: 3;
  display: none;
}


/* Styling */

.container>.row>div {
  border: 2px solid #0580d5;
  background-color: rgba(40, 180, 240, .3);
  border-radius: 5px;
}

[class^="item"] {
  text-align: center;
  box-sizing: border-box;
  font-size: 5em;
  color: #0580d5;
  transition: .2s;
}

<div class="container">
  <div class="row">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
  </div>
  <div class="row">
    <div class="item-4">4</div>
    <div class="item-5">5</div>
    <div class="item-6">6</div>
  </div>
  <div class="row">
    <div class="item-7">7</div>
    <div class="item-8">8</div>
    <div class="item-9">9</div>
  </div>
</div>