Question

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

例如，我有以下页面： enter image description here

当我将鼠标悬停在如下所示的部分之上时，我希望它看起来如下所示： enter image description here

这里使用的代码：

                <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）来实现。

感谢。

Answer 1

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

参考文献：here和here。 提示'绝对'。

现在为了过渡，我建议我们回到w3schools的友好小伙伴们：但是，根据具体的如何，您希望该部分“滑动”在另一个上，您可能更喜欢使用动画而不是过渡。

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

是否可以在网页中使用CSS“滑动”一个部分在另一个之上

1 个答案: