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

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

I've got a wall of tabs on a web page and I when a user rolls over one I want a div to slide over the same tab that was rolled over and any tabs that are positioned below.

我在网页上有一个标签墙,当用户翻过一个标签时我想要一个div滑过翻过的同一个标签和下面的任何标签。

If you run my demo code you can see the that the div being revealed goes behind the div further down the page.

如果您运行我的演示代码,您可以看到显示的div在页面下方的div后面。

Is it possible to get this to work?

有可能让它发挥作用吗?

Also, is it bad to be having an inner div be taller than its container?

另外,内部div比容器高还不好吗?

One other thing I tried to do was put the inner div outside on its own and then absolutely position it such that it appears over the button.

我试图做的另一件事是将内部div放在外面,然后绝对定位它使它出现在按钮上。

position: absolute;
top: 0;

This results in an unfortunate effect whereby the btn div keeps re-triggering the animation. It does fix the issue with the levels though.

这导致了不幸的效果,即btn div不断重新触发动画。它确实修复了关卡的问题。

2 个解决方案

#1

Just add position:relative to the btn and reveal elements and add a z-index:999 to the reveal elements.

只需添加位置:相对于btn并显示元素,并向揭密元素添加z-index:999。

Also better to use classes for elements with common styling and behavior..

也可以更好地使用具有常见样式和行为的元素的类。

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;
}

and jquery

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

Demo at http://jsfiddle.net/gaby/T7USy/

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

#2

Is this what you want: 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>

#1