Question

好的，所以我有三个div，红色，绿色和黑色堆叠在一起。当我将鼠标悬停在slider课程上时，我希望绿色和黑色div在悬停时向上滑动。但是我不希望绿色div在悬停时隐藏在红色div后面（就像它当前那样），相反，它应该覆盖在红色div的顶部。

即悬停时，红色，绿色和黑色div应该是可见的，绿色div覆盖红色div的一部分。我已尝试将绝对定位与z-index一起使用，但它似乎无法正常工作！

我把html，css和javascript放在jsfiddle中：http://jsfiddle.net/8Qsp8/

Answer 1

问题不在于定位。您正在使用jQuery的滑动功能。它实际上并没有推动你的div提词。它从底部到顶部减少它。因此，您的绿色div实际上并未移动到红色div之下。它从下到上消失。

这是你想要的：http://jsfiddle.net/8Qsp8/5/

动画版：http://jsfiddle.net/8Qsp8/13/

你需要这个jQuery：

$("#slider").mouseover(function () {
    $(".slide2").stop().animate({bottom: '100px'});
});

$("#slider").mouseout(function () {
    $(".slide2").stop().animate({bottom:'-100px'});
});

在向上滑动时将叠加的div叠加在另一个div上方

1 个答案: