Используя CSS, как отобразить другой div поверх оригинала при наведении - PullRequest
Новая
       2

Используя CSS, как отобразить другой div поверх оригинала при наведении

0 голосов
/ 15 января 2020

У меня есть 4 div в некоторых ящиках, и я хотел бы скрыть оригинальный div (при наведении) с другой парой скрытых div. Таким образом, в начале это будет выглядеть как 

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

, а после наведения на Q1 появится пара скрытых div и будет скрывать Q1, что-то вроде: 

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

Возможно ли получить это поведение с использованием CSS? Мой код до сих пор выглядит следующим образом (при наведении курсора меняются только цвета, каждый раз, когда я добавляю новый div, он портит мою таблицу: 

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

1 Ответ

1 голос
/ 15 января 2020

В основном вам нужно добавить элементы внутри ваших коробок, чтобы скрыть / показать. Вы можете сделать это с помощью pseudo-elements или добавить что-то в DOM. Поскольку я предполагаю, что вы сможете щелкнуть действия «да / нет», вам следует добавить элемент. 

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