CSS 在不影响周围内容的情况下转换 div

Question

我正在研究一种使用 CSS 显示帮助的方法，而无需对话框或弹出窗口。

我在div中有一个图像，当图像悬停在图像上时，该图像的大小将发生变化，显示帮助内容。

我在那个div 下面还有另一个div，它代表帮助div 将位于的页面内容。这是我的代码：

.HTML：

    <div id="answers" class="answers">
        <img src="images/bullet_question.png" height="50" width="50">
    </div>
    <div class="below">will it push me down?</div>

.CSS：

    div.answers
    {
        height: 50px;
        width: 50px;
        background-color: transparent;
        color: #FFF;
        z-index: 2;
    }
    div.answers:hover
    {
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        height: 400px;
        width: 400px;
        background-color: #333;
        border: 2px solid #000;
        border-top-left-radius: 30px;
        z-index: 2;
    }
    div.below
    {
        z-index: 1;
    }

问题是，如何在不影响下面的类div的情况下转换答案类div;将其向下推。如您所见，我对 z-index 进行了一些实验，但无济于事。

Answer 1

你需要另一个div 来包装你的图像。

.HTML

<div id="answers" class="answers">
    <div class="another-div">
        <img src="images/bullet_question.png" height="50" width="50">
    </div>
</div>
<div class="below">will it push me down?</div>

.CSS

.answers
{
    height: 50px;
    width: 50px;
    background-color: transparent;
    color: #FFF;
    z-index: 2;
}
.another-div:hover
{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    position:absolute;
    height: 400px;
    width: 400px;
    background-color: #333;
    border: 2px solid #000;
    border-top-left-radius: 30px;
    z-index: 2;
}
.below
{
    z-index: 1;
    color: red;
}

工作小提琴