使用 CSS，如何在懸停時在原始頂部顯示另一個 div

Question

我在某種盒子中有 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>

Answer 1

基本上你需要在你的盒子里添加元素來隱藏/顯示。 您可以使用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>

使用 CSS，如何在懸停時在原始頂部顯示另一個 div

問題描述

1 個解決方案

解決方案1
1 已采納 2020-01-15 18:19:40

使用 CSS，如何在懸停時在原始頂部顯示另一個 div

問題描述

1 個解決方案

解決方案1 1 已采納 2020-01-15 18:19:40

解決方案1
1 已采納 2020-01-15 18:19:40