CSS不在父元素中时隐藏元素

Question

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

演示： http ： //jsfiddle.net/A4dc7/

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

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

Answer 1

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