使用 CSS，如何在悬停时在原件之上显示另一个 div

Question

我在某种盒子里有 4 个 div，我想用另一对隐藏的 div 隐藏原始 div（悬停时）。所以一开始它看起来像

 _______    _______
|  Q1   |  |  Q2   |
|_______|  |_______|
 _______    _______
|  Q3   |  |  Q4   |
|_______|  |_______|

悬停在 Q1 上后，一对隐藏的 div 会出现并隐藏 Q1，例如：

 ___  ___    _______
| Y || N |  |  Q2   |
|___||___|  |_______|
 _______    _______
|  Q3   |  |  Q4   |
|_______|  |_______|

是否可以使用 CSS 获得此行为？到目前为止，我的代码看起来像这样（悬停时只是改变颜色，每次我添加新的 div 它都会弄乱我的 table:

 .table {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  background-color: #eee;
  color: #232794;
}

.boxes {
  background-color: #232794;
  color: #fff;
  border-radius: 7px;
  padding: 33px;
  text-align: center;
  transition: 0.3s;
}

.boxes:hover {
  background-color: #000000;
}

<body>
<div class="table">
  <div class="boxes">Q1</div>
  <div class="boxes">Q2</div>
  <div class="boxes">Q3</div>
  <div class="boxes">Q4</div>
</div>

Answer 1

基本上，您需要将框内的元素添加到 hide/show。您可以使用 pseudo-elements 或向 DOM 添加内容来执行此操作。由于我假设您将能够单击 "yes/no" 操作，因此您实际上应该添加一个元素。

 .table {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-gap: 10px;
  background-color: #eee;
  color: #232794;
}

.boxes {
  width: 100px;
  height: 100px;
  background-color: #232794;
  color: #fff;
  border-radius: 7px;
  text-align: center;
  transition: 0.3s;
}
.boxes .question, .boxes .answer {
  /* center horizontally & vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.boxes .answer {
  /* hide this until hover */
  display:none;
}

.boxes:hover {
  cursor:pointer;
}
.boxes:hover .question {
  /* hide question */
  display:none;
}
.boxes:hover .answer {
  /* show answer */
  display:block;
}

<body>
<div class="table">
  <div class="boxes">
    <div class="question">Q1</div>
    <div class="answer">
     <button>Yes</button>
     <button>No</button>
    </div>
  </div>
  <div class="boxes">
    <div class="question">Q2</div>
    <div class="answer">
     <button>Yes</button>
     <button>No</button>
    </div>
  </div>
  <div class="boxes">
    <div class="question">Q3</div>
    <div class="answer">
     <button>Yes</button>
     <button>No</button>
    </div>
  </div>
  <div class="boxes">
    <div class="question">Q4</div>
    <div class="answer">
     <button>Yes</button>
     <button>No</button>
    </div>
  </div>
</div>

使用 CSS，如何在悬停时在原件之上显示另一个 div

Using CSS, how to display another div on top of original on the hover

html

css

hover