Html 如何阻止隐藏DIV中的视频播放按钮泄漏到可见DIV中？

我正在处理一个包含4个内容DIV的页面，其中3个在任何给定时间都对查看器隐藏，这取决于查看器单击的DIV链接。其中一个div（#视频和更多）将包含一个或多个嵌入式视频。该页面在桌面Firefox、Chrome和Safari中正常运行。在mobile Safari上有一个令人困惑的问题，视频播放按钮——只有视频播放按钮——显示在所有的分区中，不管它们是否隐藏

html:

---

要查看问题在我的iPhone 4S上的表现，请参阅图片链接

--非常感谢

---

您是否在桌面浏览器上使用移动仿真复制了此功能？如果是这样的话，你可以试试inspector窗口，找出它为什么会出现。不，我没有这样做。你有什么建议吗？在你的经验中，什么是好的工具？桌面Safari有一个移动显示模式，但很糟糕。Chrome浏览器在模拟移动设备方面做得很好。您还可以将iphone连接到台式机/笔记本电脑，并通过iphone上的safari调试网站。这里有一篇关于如何设置它的文章：您是否在桌面浏览器上使用移动仿真复制了它？如果是这样的话，你可以试试inspector窗口，找出它为什么会出现。不，我没有这样做。你有什么建议吗？在你的经验中，什么是好的工具？桌面Safari有一个移动显示模式，但很糟糕。Chrome浏览器在模拟移动设备方面做得很好。您还可以将iphone连接到台式机/笔记本电脑，并通过iphone上的safari调试网站。下面是一篇关于如何设置它的文章：

<div id="videos-and-more”>
<div class="videos-and-more-page">
<div class="video-wrapper1">
<video poster="ghost-venture-crew-zondra-mae-stanley-hotel.jpg" width="710" height="399" controls="auto">
<source src="ghost-venture-crew-zondra-stanley-hotel-hauntedhousesdotcom.mp4" type="video/mp4">
<source src="ghost-venture-crew-zondra-stanley-hotel-hauntedhousesdotcom.ogg" type="video/ogg">
<source src="ghost-venture-crew-zondra-stanley-hotel-hauntedhousesdotcom.webm" type="video/webm">
</video>
</div>
</div>
</div>

#videos-and-more {visibility: hidden}
#videos-and-more:target {visibility: visible}

.videos-and-more-page {
position: absolute;
left: 0;
width: 800px;
margin: 20px auto;
top:250px;
z-index: 50;}

#gallery {visibility: hidden}
#gallery:target {visibility: visible}

.gallery-page {
position: absolute;
left: 0;
width: 800px;
margin: 20px auto;
top:250px;
z-index: 40;}

#full-story {visibility: hidden;}
#full-story:target {visibility: visible;}

.full-story-page {
position: absolute;
left: 0;
width: 800px;
margin: 20px auto;
top:250px;
z-index: 30;}

#quick-visit {visibility: hidden;}
#quick-visit:target {visibility: visible;}

.quick-visit-page {
position: absolute;
left: 0;
width: 800px;
margin: 20px auto;
top:250px;
z-index: 20;}