Question

我使用jQuery和CSS来创建一个很酷的效果，箭头在一个大三角形内飞过屏幕。问题是我只希望移动箭头在三角形内部时可见。即使箭头的一个像素在三角形内部，该部分也应该可见。

CSS：

.arrow_first {
    position: absolute;
    top: -108px;
    left: -142px;
    border-left: 44px solid transparent;
    border-right: 25px solid transparent;
    border-top: 60px solid white;
    z-index: 10;
}
.arrow_second {
    position: absolute;
    top: -229px;
    left: -213px;
    border-left: 26px solid transparent;
    border-right: 14px solid transparent;
    border-top: 40px solid white;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    /* IE 9 */
    -webkit-transform: rotate(-5deg);
    /* Safari and Chrome */
    z-index: 7;
}
.arrow_third {
    position: absolute;
    top: -280px;
    left: -202px;
    border-left: 7px solid transparent;
    border-right: 5px solid transparent;
    border-top: 12px solid white;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    /* IE 9 */
    -webkit-transform: rotate(-5deg);
    /* Safari and Chrome */
    z-index: 5;
}
.arrow_fourth {
    position: absolute;
    top: -116px;
    left: -111px;
    border-left: 21px solid transparent;
    border-right: 7px solid transparent;
    border-top: 28px solid white;
    z-index: 10;
}
.arrow_five {
    position: absolute;
    top: -200px;
    left: -173px;
    border-left: 14px solid transparent;
    border-right: 4px solid transparent;
    border-top: 21px solid white;
    z-index: 8;
}
.arrow_six {
    position: absolute;
    top: -294px;
    left: -257px;
    border-left: 31px solid transparent;
    border-right: 20px solid transparent;
    border-top: 42px solid white;
    z-index: 8;
}

我认为应该在jQuery上使用$.parent，但我不知道如何识别。

Answer 1

这不会按你想要的方式工作通常，为了确保父元素可视地包含子元素，您需要将overflow:hidden;设置为父元素。在你的情况下，你使用height:0; width:0;为你的父亲，你只有边框来描绘你的元素...没有骰子与那一个AFAIK，导致设置溢出隐藏在0x0 px父级 - 将不会使您的子元素可见

当CSS元素不在父元素中时，CSS会隐藏元素

1 个答案: