Javascript 在幻灯片放映覆盖上显示隐藏可见性

我正在通过swiper进行幻灯片放映，我想使用覆盖幻灯片的覆盖层。出于设计原因，覆盖div必须位于swiper容器内，覆盖链接必须位于该容器外。 我尝试使用点击功能，但由于某种原因，它不起作用，覆盖层也没有显示出来。有人知道如何解决这个问题，或者我做错了什么吗？谢谢

var swiper=新的swiper'.swiper容器'{ 幻灯片视图：1， 间距：0， 循环：对， 分页：{ el:“.swiper分页”， 可点击：正确， }, 导航：{ nextEl:“.swiper按钮下一步”， prevEl:“.swiper按钮prev”， }, }; $“测试”。单击函数{ 如果$'five-detail'.css'visibility'=='hidden' $'five-detail'.css'visibility'，'visible'； 其他的 $'five-detail'.css'visibility'，'hidden'； }; 五个细节{ 背景色：红色； 位置：绝对位置； z指数：10100； 宽度：100%； 身高：100%； 左边距：自动； 右边距：自动； 可见性：隐藏； } .swiper容器{ 宽度：100%； 身高：100%； 左边距：自动； 右边距：自动； } .滑梯{ 文本对齐：居中； 字号：18px； 背景：fff； 显示：-网络工具包盒； 显示：-ms flexbox； 显示：-webkit flex； 显示器：flex； -webkit盒包：中心； -ms-flex-pack:center； -webkit内容：中心； 证明内容：中心； -webkit框对齐：居中； -ms-flex-align：居中； -webkit对齐项目：居中； 对齐项目：居中； } 测验

---

对于第一点，您已经在href中使用了test，并且在没有id=test的div时，在test上使用了click函数

其次，HTML中覆盖的id是五个细节，Javascript中覆盖的id是五个细节。javascript部分中缺少一个s

我还为锚测试添加了CSS

检查这个JsFiddle

var swiper=新的swiper'.swiper容器'{ 幻灯片视图：1， 间距：0， 循环：对， 分页：{ el:“.swiper分页”， 可点击：正确， }, 导航：{ nextEl:“.swiper按钮下一步”， prevEl:“.swiper按钮prev”， }, }; $“测试”。单击函数{ 如果$'five-details'.css'visibility'=='hidden' $'five-details'.css'visibility'，'visible'； 其他的 $'five-details'.css'visibility'，'hidden'； }; 五个细节{ 背景色：红色； 位置：绝对位置； z指数：10100； 宽度：100%； 身高：100%； 左边距：自动； 右边距：自动； 可见性：隐藏； } 试验{ z指数：10101； 位置：绝对位置； 排名：0； 宽度：100%； 身高：100%； } .swiper容器{ 宽度：100%； 身高：100%； 左边距：自动； 右边距：自动； } .滑梯{ 文本对齐：居中； 字号：18px； 背景：fff； 显示：-网络工具包盒； 显示：-ms flexbox； 显示：-webkit flex； 显示器：flex； -webkit盒包：中心； -ms-flex-pack:center； -webkit内容：中心； 证明内容：中心； -webkit框对齐：居中； -ms-flex-align：居中； -webkit对齐项目：居中； 对齐项目：居中； } 测验 细节1错误 HTML元素

var swiper=新的swiper'.swiper容器'{ 幻灯片视图：1， 间距：0， 循环：对， 分页：{ el:“.swiper分页”， 可点击：正确， }, 导航：{ nextEl:“.swiper按钮下一步”， prevEl:“.swiper按钮prev”， }, }; $document.readyfunction{ $“测试”。单击函数{ 如果$'five-details'.css'visibility'=='hidden' $'five-details'.css'visibility'，'visible'； 其他的 $'five-details'.css'visibility'，'hidden'； }; } 五个细节{ 背景色：红色； 位置：绝对位置； z指数：10100； 宽度：100%； 身高：100%； 左边距：自动； 右边距：自动； 可见性：隐藏； } .swiper容器{ 宽度：100%； 身高：100%； 左边距：自动； 右边距：自动； } .滑梯{ 文本对齐：居中； 字号：18px； 背景：fff； 显示：-网络工具包盒； 显示：-ms flexbox； 显示：-webkit flex； 显示器：flex； -webkit盒包：中心； -ms-flex-pack:center； -webkit内容：中心； 证明内容：中心； -webkit框对齐：居中； -ms-flex-align：居中； -webkit对齐项目：居中 ; 对齐项目：居中； } 测验

---

详细信息扫描您可能会添加预期结果的图像。请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难准确地说出你在问什么。请参阅页面以获取澄清此问题的帮助。