Question

我有一些HTML，其中基本上有一个包含文本的div。我创建了第二个具有绝对定位的div，我希望它向上滑动（最初隐藏在主div之下），以使div填充新背景颜色。

我让div滑动，但它总是覆盖原始文本。我如何防止它这样做。

代码： HTML：

<div id="container">
    <div id="blue">Hey</div>
    <div id="green"></div> </div> <input type="button" value="up" id="button" />

CSS

#container    {position:relative; overflow:hidden; height:50px; width:50px; }
#blue         {height:50px; width:50px; background:#009; position:relative; top:0; left:0; color:white;}
#green        {height:50px; width:50px; background:#090; position:absolute; top:50px; left:0;}

Jquery的

$('#button').toggle(function() {
    $('#green').animate({
        top: 0
    }, 1000, function() {
        $('#button').val('down');
    });
}, function() {
    $('#green').animate({
        top: '50'
    }, 1000, function() {
        $('#button').val('up');
    });
});

Answer 1

您只需将span元素包裹在#blue元素的文本周围即可。

<div id="container">
    <div id="blue">
        <span>Text</span>
    </div>
    <div id="green"></div>
</div>

然后定位span元素并增加z-index：

Updated Example

#blue > span {
    position: relative;
    z-index: 1;
}

jQuery动画div滑动而不覆盖文本

1 个答案: