我有两个绝对定位的DIV(上一个图像和下一个图像)。这是我的结构:

<div id="sheet" onclick="close()">
    <div id="popover">
        <div id="previous-image" onclick="previous()">&laquo;</div>
        <img src="http://cynthiawoodyardlandscapedesign.com/watermark.php?src=images/main1.jpg&x=0&y=470&opacity=50" id="popover-image" />
        <div id="next-image" onclick="next()">&raquo;</div>
    </div>
</div>


链接:http://cynthiawoodyardlandscapedesign.com/

这是我的CSS:

#next-image {
    position: absolute;
    right: -100px;
    top: 250px;
    text-align: center;
    line-height: 50px;
    font-size: 50px;
    -webkit-text-stroke: 1px black;
    -moz-text-stroke: 1px black;
    height: 50px;
    width: 50px;
    z-index: 200;
    background: transparent;
    color: white;
}
#previous-image {
    position: absolute;
    left: -100px;
    top: 250px;
    text-align: center;
    line-height: 50px;
    z-index: 200;
    font-size: 50px;
    -webkit-text-stroke: 1px black;
    -moz-text-stroke: 1px black;
    height: 50px;
    width: 50px;
    background: transparent;
    color: white;
}


我的JavaScript:

$("#sheet").click(function() {
    $("#sheet").animate({
        opacity: 0
    }, 200, function() {
        $("#sheet").hide();
    });
});

最佳答案

编辑

似乎您已经省略了#sheet元素的实际HTML,该元素在元素上设置了display: none,因此在工作表元素(包括箭头)中所有内容都不可见。

您网站上的实际HTML是:

<div id="sheet" onclick="close()" style="display: none;">
    <div id="popover" onclick="close()">
        <div id="previous-image" onclick="previous()">«</div>
        <img src="watermark.php?src=images/main1.jpg&amp;x=0&amp;y=420&amp;opactity=50"
        id="popover-image" onclick="close()">
        <div id="next-image" onclick="next()">»</div>
    </div>
</div>


删除该style="display: none;"将再次显示箭头。

关于javascript - 绝对定位的DIV不可见,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14696425/

10-12 00:09
查看更多