无法将悬停应用于 html 网格项目

Question

我使用 html 网格，其中包含如下卡片：

.cards-container {
  display: grid;
  grid-template-columns: 30% 30%;
  grid-template-rows: minmax(150px, auto) auto;
}

.card-area-1 {
  grid-area: 1 / 1 / 3 / 2;
}

.card-area-2 {
  grid-area: 1 / 2 / 3 / 3;
}

.card-area-1,
.card-area-2 {
  background: #fff;
  box-shadow: 0 2px 18px 0 rgba(0, 82, 145, 0.12);
  border-radius: 8px;
}

.card-1 {
  grid-column: 1;
  grid-row: 1;
}

.card-2 {
  grid-column: 2;
  grid-row: 1;
}

.card-btn-1 {
  grid-column: 1;
  grid-row: 2;
}

.card-btn-2 {
  grid-column: 2;
  grid-row: 2;
}

<div class="cards-container">
  <div class="card-area-1"></div>
  <div class="card-area-2"></div>
  <div class="card-1">
    <div class="card-header">Header 1</div>
    <div class="card-content">Text 1</div>
  </div>
  <div class="card-2">
    <div class="card-header">Header 2</div>
    <div class="card-content">Text 2</div>
  </div>
  <div class="card-btn-1">
    <img src="proceed.jpg">
  </div>
  <div class="card-btn-2">
    <img src="proceed.jpg">
  </div>
</div>

如你所见，我声明了两个卡片区域 css 应用于，

我的问题是我无法将鼠标悬停状态应用到 card-area-1 和 card-area-2，

有什么方法可以得到类似于：

.card-area-1:hover {
   border: 1px solid blue;
}

Answer 1

因为.card-area-1上面有.card。这就是悬停未被触发的原因。您可以将 z-index 用于 .card-area-1

.cards-container {
  display: grid;
  grid-template-columns: 30% 30%;
  grid-template-rows: minmax(150px, auto) auto;
}

.card-area-1 {
  grid-area: 1 / 1 / 3 / 2;
}

.card-area-2 {
  grid-area: 1 / 2 / 3 / 3;
}

.card-area-1,
.card-area-2 {
  background: #fff;
  box-shadow: 0 2px 18px 0 rgba(0, 82, 145, 0.12);
  border-radius: 8px;
}

.card-1 {
  grid-column: 1;
  grid-row: 1;
}

.card-2 {
  grid-column: 2;
  grid-row: 1;
}

.card-btn-1 {
  grid-column: 1;
  grid-row: 2;
}

.card-btn-2 {
  grid-column: 2;
  grid-row: 2;
}

.card-area-1 {
  position: relative;
  z-index: 2;
}

.card-area-1:hover {
  border: 1px solid blue;
}

<div class="cards-container">
  <div class="card-area-1"></div>
  <div class="card-area-2"></div>
  <div class="card-1">
    <div class="card-header">Header 1</div>
    <div class="card-content">Text 1</div>
  </div>
  <div class="card-2">
    <div class="card-header">Header 2</div>
    <div class="card-content">Text 2</div>
  </div>
  <div class="card-btn-1">
    <img src="proceed.jpg">
  </div>
  <div class="card-btn-2">
    <img src="proceed.jpg">
  </div>
</div>

无法将悬停应用于 html 网格项目

Can't apply hover to html grid item

css

grid