无法将悬停应用于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。这就是悬停不会被触发的原因。您可以为.card-area-1使用z-index

​

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

​