0

我想使用 CSS3 过渡给我的网页添加一些效果。基本上,我想让一个特定部分滑到另一个部分之上。

例如我有以下页面: 在此处输入图像描述

当我将鼠标悬停在如下部分的顶部时,我希望它看起来像下面这样: 在此处输入图像描述

这里使用的代码:

                <div class="polar">
                <div class="flt-sec-left">
                    <a href="index.html" class='left'>home</a>
                    <section>
                    <p> Our offers are the best on the city !! Check out our amazing activities !!! </p>
                    </section>
                </div>
                <div class="flt-sec-right">
                    <a href="_web/playa.html" class="inv">La Playa !</a>
                    <section class='inv'>
                <p> One of the best in the world, if not the best, garanty !!! </p>
                    </section>
                </div>
            </div>
            <div class="polar">
                <div class="flt-sec-left">
                    <a href="_web/ciudad.html" >La Ciudad !</a>
                    <section>
                <p> Feel what your granpa felt in his youth, back to the fifties baby !! </p>
                    </section>
                </div>
                <div class="flt-sec-right">
                    <a href="_web/excursion.html" class="inv">La Excursion !</a>
                    <section class='inv'>
                  <p> I thought pirate of the carabbean was all a hollywood set up. No ! We got it all wrong !! </p>
                    </section>
                </div>
         </div>

和CSS:

.polar
{
    width:50%;
    float:left;
}
.flt-sec-left
{
    width:50%;
    float:left; 
}
.flt-sec-right
{
    width:50%;
    float:right;
}
.flt-sec-left:hover
{
z-index:1;
    width:50%;
    transition: width 2s;
}
.flt-sec-right:hover
{
    position:absolute;
z-index:1;
    width:50%;
    transition: width 2s;
}

所以我希望我的主页部分滑到 la playa 部分的顶部(现在它只是推动它并迫使它在页面上下降)。

是否可以使用浮动技术(仅使用 CSS 和 HTML)来做到这一点。

谢谢。

4

1 回答 1

0

看看z-index:position: absolute属性。

参考:这里这里提示“绝对”。

现在对于过渡,我建议我们直接回到 w3schools 的友好小伙伴那里:但是,具体取决于希望该部分如何“滑过”另一个部分,您可能更喜欢使用动画而不是过渡。

如上所述,如果您提供您正在使用的当前代码的 jsfiddle,它将允许我和其他所有人更具体。特异性产生结果。

于 2013-06-19T19:52:15.260 回答