2 
<html>
<body>
    <div id="btn">
        <div id="reveal">
        </div>
    </div>
    <div id="btn2">
        <div id="reveal2">
        </div>
    </div>
    <style>
        #btn, #btn2
        {
            background-color: red;
            height: 100px;
            width: 200px;
        }
        #btn2
        {
            margin-top: 10px;
        }
        #reveal, #reveal2
        {
            background-color: green;
            height: 400px;
            width: 200px;
            display: none;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
        $('#btn').hover(function () {
            $('#reveal', this).stop(true, true).slideDown("normal");
        }, function () {
            $('#reveal', this).stop(true, true).hide();
        });
    </script>
</body>
</html>

我在网页上有一堵标签墙，当用户滚动一个标签时，我希望 div 滑过滚动过的同一个标签以及位于下方的任何标签。

如果您运行我的演示代码，您可以看到被显示的 div 位于页面下方的 div 后面。

有可能让它工作吗？

另外，让内部 div 比它的容器高是不是很糟糕？

我尝试做的另一件事是将内部 div 单独放在外面，然后绝对定位它，使其出现在按钮上方。

position: absolute;
top: 0;

这导致了一个不幸的效果，即 btn div 不断重新触发动画。不过，它确实解决了关卡的问题。

4

2 回答 2

5

只需添加position:relative到btnandreveal元素并添加 az-index:999到reveal元素。

最好将类用于具有共同样式和行为的元素..

html

<div class="btn">
    <div class="reveal"></div>
</div>
<div class="btn">
    <div class="reveal"></div>
</div>

CSS

.btn {
    background-color: red;
    height: 100px;
    width: 200px;
    position:relative;
    margin-bottom:10px;
}
.reveal {
    background-color: green;
    height: 400px;
    width: 200px;
    display: none;
    z-index:999;
    position:relative;
}

和jQuery

    $('.btn').hover(function () {
        $('.reveal', this).stop(true, true).slideDown("normal");
    }, function () {
        $('.reveal', this).stop(true, true).hide();
    });

演示在http://jsfiddle.net/gaby/T7USy/

于 2013-02-07T17:41:39.740 回答
4

这是你想要的吗：小提琴

<!doctype html>
<html>
<body>
    <div id="btn">
        <div id="reveal">1111111111</div>
    </div>
    <div id="btn2">
        <div id="reveal2">222222222</div>
    </div>
    <style>
        #btn, #btn2 {
            background-color: red;
            height: 100px;
            width: 200px;
            position:relative;
            z-index:3;
        }
        #btn2 {
            margin-top: 10px;
            z-index:1;
        }
        #reveal, #reveal2 {
            background-color: green;
            height: 400px;
            width: 200px;
            display: none;
            position:absolute; /*<--update it*/
            left:0;            /*<--update it*/
            top:0;             /*<--update it*/
            z-index:2;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
        $('[id^=btn]').hover(function() {
            $('[id^="reveal"]', this).stop(true, true).slideDown("normal");
        }, function() {
            $('[id^="reveal"]', this).stop(true, true).hide();
        });
    </script>
</body>

于 2013-02-07T17:37:27.760 回答