使用 CSS，如何在悬停时在原始顶部显示另一个 div

Question

I have 4 divs in a some kind of boxes and I would like to hide original div (on hover) with another pair of hidden divs.我在某种盒子中有 4 个 div，我想用另一对隐藏的 div 隐藏原始 div（悬停时）。 So at the beginning it would looks like所以一开始它看起来像

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

and after hover on Q1 pair of hidden divs would appear and hide Q1, something like:悬停在 Q1 上后，会出现一对隐藏的 div 并隐藏 Q1，例如：

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

Is it possible to get this behavior using CSS?是否可以使用 CSS 获得这种行为？ My code so far looks like this (there is just changing colors on hovering, every time I add new div it messes up my table:到目前为止，我的代码看起来像这样（只是在悬停时更改颜色，每次添加新 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

Basically you need to add elements inside your boxes to hide/show.基本上你需要在你的盒子里添加元素来隐藏/显示。 You can either do this with pseudo-elements or by adding something to the DOM.您可以使用pseudo-elements或通过向 DOM 添加一些东西来做到这一点。 Since I assume you're going to be able to click the "yes/no" actions, you should actually add an element.由于我假设您将能够单击“是/否”操作，因此您实际上应该添加一个元素。

 .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