Javascript 如何显示带有悬停效果字幕的模态图像？

我有一个反应灵敏的图像网格，它工作得很好，我很满意

现在，我想在图像中添加悬停效果，以便应用白色半透明过滤器，并在图像上显示文本以及图像的更多细节。 我还希望图像是模态和弹出时点击

当我应用悬停效果时，弹出图像似乎停止工作。 有人能告诉我出了什么问题吗？ 注意：我知道悬停效果并没有应用于所有的图像。这是因为当我意识到它不起作用时，我没有费心

var modalEle=document.querySelector.modal； var modalImage=document.querySelector.modalImage； Array.fromdocument.queryselectoral.ImgThumbnail.forEachitem=>{ item.addEventListenerclick，事件=>{ modalEle.style.display=块； modalImage.src=event.target.src； }; }; document.querySelector.close.addEventListener单击，=>{ modalEle.style.display=无； }; img{ 边框：2倍实心； 最小高度：100px； 最小宽度：100px； } 身体{ 最大宽度：1024px； 左边距：自动； 右边距：自动； 字体系列：verdana } /*主要*/ 主要{ 保证金：200px 0 100px 0； 高度：自动； 最大宽度：1024px； 颜色：66704D； 字母间距：3px； } .行{ 显示器：flex； 柔性包装：包装； 填充：0 4px 4px 2%； } .栏目{ 弹性：31.3%； 最大宽度：31.3%； 填充：0.4px； } .img列{ 边缘顶部：8px； 垂直对齐：中间对齐； 宽度：100%； } /*覆盖层*/ .集装箱{ 位置：相对位置； 宽度：100%； } .img缩略图{ 显示：块； 宽度：100%； 高度：自动； } .覆盖{ 位置：绝对位置； 排名：0； 底部：0； 左：0； 右：0； 身高：100%； 宽度：100%； 不透明度：0； 过渡：放松； 背景色：RGBA255255,0.9； } .container:悬停。覆盖{ 不透明度：1； } .文本{ 颜色：66704d； 字体大小：20px； 字母间距：5px； 位置：绝对位置； 最高：50%； 左：50%； -webkit转换：翻译-50%，-50%； -ms转换：翻译-50%，-50%； 转化：转化-50%，-50%； 文本对齐：居中； } /*模态*/ .img缩略图{ 光标：指针； 过渡：0.3s； } .莫代尔{ 显示：无； 位置：固定； z指数：1； 填充顶部：100px； 左：0； 排名：0； 宽度：100%； 身高：100%； 溢出：自动； 背景色：rgb255、255、255、0.85； } 莫达利梅先生{ 保证金：自动； 显示：块； 宽度：100%； 高度：自动； 最大宽度：1024px； } .结束{ 位置：绝对位置； 顶部：15px； 右：35px； 颜色：66704d； 字体大小：40px； 字体大小：粗体； 过渡：0.3s； } .关闭：悬停， .结束：聚焦{ 光标：指针； } @仅介质屏幕，最大宽度：700px{ 莫达利梅先生{ 宽度：100%； } } /*平板电脑*/ @介质最大宽度：768px{ .栏目{ 弹性：47%； 最大宽度：47%； } /*流动的*/ @介质最大宽度：400px{ .栏目{ 弹性：100%； 最大宽度：100%； } } 标题内容 × 查看演示：

使用以下javascript：

<script>
var modalEle = document.querySelector(".modal");
var modalImage = document.querySelector(".modalImage");
Array.from(document.querySelectorAll(".ImgThumbnail + .overlay")).forEach(item => {
  var itemImage = item.parentNode.firstElementChild.getAttribute("src");
   item.addEventListener("click", event => {
      modalEle.style.display = "block";
      modalImage.src = itemImage//event.target.src;
   });
});
document.querySelector(".close").addEventListener("click", () => {
   modalEle.style.display = "none";
});
</script>

欢迎来到论坛：

这听起来像是当光标悬停在图像上时，悬停状态实际上是在可单击图像元素的顶部分层的，因此阻止用户单击它并激活弹出模式。请尝试将您的侦听器添加到悬停状态元素中，或者将标题与图像分组，以便两者都可以单击ed继续。我已经为下面的片段配对了您的示例

干杯

var modalEle=document.querySelector.modal； var modalImage=document.querySelector.modalImage； Array.fromdocument.queryselectoral.overlay.forEachitem=>{ item.addEventListenerclick，事件=>{ modalEle.style.display=块； modalImage.src=event.target.parentNode.querySelector.ImgThumbnail.src； }; }; document.querySelector.close.addEventListener单击，=>{ modalEle.style.display=无； }; 身体{ 颜色：66704D； 字母间距：3px； } /*覆盖层*/ .集装箱{ 位置：相对位置； 宽度：300px； 高度：200px； } .img缩略图{ 显示：块； 宽度：100%； 高度：自动； } .覆盖{ 位置：绝对位置； 排名：0； 底部：0； 左：0； 右：0； 高度： 100%; 宽度：100%； 不透明度：0； 过渡：放松； 背景色：rgba255、255、255、0.9； } .container:悬停。覆盖{ 不透明度：1； } .文本{ 颜色：66704d； 字体大小：20px； 字母间距：5px； 位置：绝对位置； 最高：50%； 左：50%； -webkit转换：翻译-50%，-50%； -ms转换：翻译-50%，-50%； 转化：转化-50%，-50%； 文本对齐：居中； } /*模态*/ .img缩略图{ 光标：指针； 过渡：0.3s； } .莫代尔{ 显示：无； 位置：固定； z指数：1； 填充顶部：100px； 左：0； 排名：0； 宽度：100%； 身高：100%； 溢出：自动； 背景色：rgb255、255、255、0.85； } 莫达利梅先生{ 保证金：0自动； 显示：块； 宽度：80%； 高度：自动； 最大宽度：1024px； } .结束{ 位置：绝对位置； 顶部：15px； 右：35px； 颜色：66704d； 字体大小：40px； 字体大小：粗体； 过渡：0.3s； } .关闭：悬停， .结束：聚焦{ 光标：指针； } @仅介质屏幕，最大宽度：700px{ 莫达利梅先生{ 宽度：100%； } } 标题内容 ×

---

是的，我认为这个问题一定是类似的，非常感谢你的帮助。我已经做了更改，它工作得非常好！！