Question

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

我在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;
}

<强> Working Fiddle

CSS转换div而不影响周围的内容

1 个答案: