如何将孩子叠加在另一个父母之上？

时间：2015-03-20 12:35:40

标签： jquery html css

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

我设置了一个代码，以试图让它工作，我终于做了，但当我把它转移到我的网站时，它仍然没有工作。我已经设置了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（）处理了我遇到的主要问题。

添加prepend语句后，figcaption将悬停在任何父母身上。

为了让figcaption悬停在它的原始图形下方，而不是左上角，我使用.offset（）语句来改变前面的figcaption相对于它的初始位置父母的形象。

为了让所有内容都重置，以便用户在查看之后可以查看另一个figcaption，我使用了clone（）语句，因此我可以删除（）figcaption，它不会影响将来的使用，而无需重新加载页面

请参阅下面我更改的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);
});

1 个答案:

答案 0 :(得分：0)

使用prepend()功能

示例：

$( ".parentClass" ).prepend( ".childClass" );
相关问题
最新问题