2

我使用 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 上完成，但我不知道如何识别。

4

1 回答 1

1

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

于 2013-08-11T22:53:12.027 回答