javascript - 使我的图像可点击而不会出现悬停抖动的解决方案

Question

所以我已经没有想法了。我有一个正在制作的网站。我的第一个。只有 CSS3 HTML JS。当我完成当前版本只是想消除错误时，我将切换到 Bootstrap 。

这是一个js fiddle https://jsfiddle.net/JKenny209/f98r32ba/#&togetherjs=I31aD4vBcy

我目前的问题是，我有一个图像在悬停时会放大，当您单击此悬停时，它会将您带到一个模式，其中包含有关某个主题的更多详细信息，但是当我删除悬停引起的抖动错误时，我失去了能力单击图像的任何部分以打开模型。我现在只能单击红色和蓝色框不重叠的地方(它只对第 2 行第 2 列的图像可见)。蓝色框是 :hover: after 伪元素。

我已经尝试在 js 中选择 :hover:after 伪元素来使其成为点击事件。但是，我似乎无法同时选择 :hover 和 :after with window.getComputedStyle(document.querySelector(".column2-row2"), 'hover::after')在 js 中。

欢迎任何与 js 或非 js 相关的解决方案。

提前致谢

Answer 1

添加这个也许可行

.column2-row2:hover::after{
    z-index: -999;
}