我有两个绝对定位的 DIV(上一张图片和下一张图片)。这是我的结构:
<div id="sheet" onclick="close()">
<div id="popover">
<div id="previous-image" onclick="previous()">«</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()">»</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
,因此在 sheet 元素中所有内容都是不可见的,包括箭头。
您网站上的实际 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&x=0&y=420&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/