我在某种盒子中有 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>最佳答案
基本上，您需要在框内添加元素以隐藏/显示。您可以使用 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>关于html - 使用 CSS，如何在悬停时在原始顶部显示另一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59755941/