jquery - 如何将 child 堆叠在另一个 parent 之上？

Question

我有一个图形标签列表，每个标签都有一个弹出的图形说明。在每个图中都有一个可点击的 div，它将 figcaption 转换为可见。我在页面上有很多图形标签，当图形标题可见时，它只会叠加在它所属的图形上，而不是其他图形。有没有办法将可见的 figcaption 堆叠在所有 parent 之上？

我用代码设置了一个 fiddle 试图让它工作，我终于做到了，但是当我把它转移到我的网站时，它仍然没有工作。我设置了 IE11 和 Chrome，但它们都无法正常工作。

http://jsfiddle.net/carlsc3/nxocs121/

HTML:

<div class=TransInfo>
    <figure class=FRM>
        <div class="CB"></div>
        <a href="http://www.example.com/">Link 1</a>
        <figcaption>Description of the Link that is in the figure a href blah blah blah blah blah blah blah blah thingie</figcaption>
    </figure>
    <figure class=FRM>
        <div class="CB"></div>
        <a href="http://www.example.com/">Link 2</a>
        <figcaption>Description of the Link that is in the figure a href blah blah blah blah blah blah blah blah thingie</figcaption>
    </figure>
</div>

CSS:

div.TransInfo {
    background-color: #E4F1FB;
    height: 100%;
    margin: 0 auto;
    list-style: none;
    overflow: auto;
    text-align: center;
    min-height: 300px;
}
figure {
    width: 300px;
    display: inline-block;
    position: relative;
    margin: 25px 25px 25px 25px;
    background: #FFFFFF;
    box-shadow: 2px 2px 2px #B8B8B8;
    overflow: visible;
}
figure a {
    padding: 5px;
    border: 1px solid #4E5052;
    text-decoration: none;
    display: block;
    color: #000000;
}
figcaption {
    padding: 5px;
    margin: -15px 0 0 15px;
    position: absolute;
    display: inline-block;
    width: 200px;
    color: #000000;
    background-color: red;
    border: 2px solid black;
    box-shadow: 4px 4px 4px #B8B8B8;
    opacity: 0;
    text-align: center;
    vertical-align: central;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
}
.CBclick {
    -webkit-animation: fighov 0.3s ease-out 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: fighov 0.3s ease-out 0s;
    -moz-animation-fill-mode: forwards;
    animation: fighov 0.3s ease-out 0s;
    animation-fill-mode: forwards;
}
@keyframes fighov {
    0% {
        opacity: 0;
        backface-visibility: hidden;
        z-index: 1;
    }
    100% {
        opacity: 1;
        backface-visibility: visible;
        z-index: 10;
    }
}
@-webkit-keyframes fighov {
    0% {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        z-index: 1;
    }
    100% {
        opacity: 1;
        -webkit-backface-visibility: visible;
        z-index: 10;
    }
}
@-moz-keyframes fighov {
    0% {div.TransInfo {
    background-color: #E4F1FB;
    height: 100%;
    margin: 0 auto;
    list-style: none;
    overflow: auto;
    text-align: center;
    min-height: 300px;
}
figure {
    width: 300px;
    display: inline-block;
    position: relative;
    margin: 25px 25px 25px 25px;
    background: #FFFFFF;
    box-shadow: 2px 2px 2px #B8B8B8;
    overflow: visible;
}
figure a {
    padding: 5px;
    border: 1px solid #4E5052;
    text-decoration: none;
    display: block;
    color: #000000;
}
figcaption {
    padding: 5px;
    margin: -15px 0 0 15px;
    position: absolute;
    display: inline-block;
    width: 200px;
    color: #000000;
    background-color: red;
    border: 2px solid black;
    box-shadow: 4px 4px 4px #B8B8B8;
    opacity: 0;
    text-align: center;
    vertical-align: central;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
}
.CBclick {
    -webkit-animation: fighov 0.3s ease-out 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: fighov 0.3s ease-out 0s;
    -moz-animation-fill-mode: forwards;
    animation: fighov 0.3s ease-out 0s;
    animation-fill-mode: forwards;
}
@keyframes fighov {
    0% {
        opacity: 0;
        backface-visibility: hidden;
        z-index: 1;
    }
    100% {
        opacity: 1;
        backface-visibility: visible;
        z-index: 10;
    }
}
@-webkit-keyframes fighov {
    0% {
        opacity: 0;
        -webkit-backface-visibility: hidden;
        z-index: 1;
    }
    100% {
        opacity: 1;
        -webkit-backface-visibility: visible;
        z-index: 10;
    }
}
@-moz-keyframes fighov {
    0% {
        opacity: 0;
        -moz-backface-visibility: hidden;
        z-index: 1;
    }
    100% {
        opacity: 1;
        -moz-backface-visibility: visible;
        z-index: 10;
    }
}
.CB {
    cursor: help;
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    border-top: 15px solid #4E5052;
    border-right: 15px solid transparent;
    z-index: 1;
}
        opacity: 0;
        -moz-backface-visibility: hidden;
        z-index: 1;
    }
    100% {
        opacity: 1;
        -moz-backface-visibility: visible;
        z-index: 10;
    }
}
.CB {
    cursor: help;
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    border-top: 15px solid #4E5052;
    border-right: 15px solid transparent;
    z-index: 1;
}

JS:

$("div.CB").click(function () {
    var thisTime = this;
    $(thisTime).siblings('figcaption').addClass('CBclick');
    setTimeout(function () {
        $(thisTime).siblings('figcaption').removeClass('CBclick');
    }, 5000);
});

---

编辑:

.prepend() 解决了我遇到的主要问题。

添加前置语句后，figcaption 将悬停在任何父级上。

为了使图形标题悬停在其原始图形下方，而不是左上角，我使用 .offset() 语句更改前置图形标题相对于其初始父图形的位置。

为了重置所有内容，以便用户可以在查看一个图形说明后查看另一个图形说明，我使用了 clone() 语句，这样我就可以删除 () 图形说明，并且它不会影响将来的使用，而无需重新加载页面。

在下面查看我更改的 jquery

$("div.CB").click(function () {                                 /* Bind click event to the top corner triangle */
    $("div.TransInfo").children('figcaption').remove();
    var thisTime = this;                                        /* 'this' keyword does not work within the setTimeout function */
    var FigPos = $(thisTime).parent('figure');                  /* Set variable to parent figure */
    var top = FigPos.offset().top;                              /* Set variable to position from top of div*/
    var left = FigPos.offset().left;                            /* Set variable to position from left of div */
    $(thisTime).siblings('figcaption').clone().prependTo("div.TransInfo");                   /* Attach the figcaption to the TransInfo div */
    $("div.TransInfo").children('figcaption').addClass('CBclick');     /* Toggle the tool tip visibility */
    $("div.TransInfo").children('figcaption').css({ "top": top + 20, "left": left - 25 }); /* Set position of figcaption to just under parent figure */
    setTimeout(function () {
        $("div.TransInfo").children('figcaption').css({ "top": "", "left": "" });
        $("div.TransInfo").children('figcaption').removeClass('CBclick');
        $("div.TransInfo").children('figcaption').remove();
    }, 5000);
});

Answer 1

使用prepend()函数

例子:

$( ".parentClass" ).prepend( ".childClass" );