Question

<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不断重新触发动画。它确实解决了水平问题。

Answer 1

这是你想要的：fiddle

<!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>

Answer 2

只需将position:relative添加到btn和reveal元素，然后将z-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/

演示

jQuery在悬停时在其他div上显示div

2 个答案: