使用悬停命令的CSS主要/次要重叠问题

Question

我有一个小型相机商店/网站 (jdsrde.com)目前正在更新并希望添加缩放效果，因此当您滚动(悬停)图像时无需单击产品页面即可获得缩放 View 。像缩略图一样，我有大约 50 张图片。

该代码有效，但由于某种原因，“缩放”图像总是位于页面中其他图像的后面。我想看看我能做些什么来解决这个问题，这样“缩放”图像就会出现在页面层的前面。我已经多次更改 z-index 但无济于事我觉得自己很愚蠢，因为我几个小时以来一直在尝试解决这个问题，但都无济于事，而且我知道答案很简单。

我不想使用 java 我更喜欢 css。

这是我使用的代码。任何帮助将不胜感激!!!

CSS>>>>

#zoom { position: relative; top: 10px; left: 10px; width: 75px; background-color: rgb(255, 255, 255); }
#zoom a.p1, #zoom a.p1:visited { border: 0pt none ; background: rgb(255, 255, 255) none repeat scroll 0%; display: block; width: 75px; height: 75px; text-decoration: none; top: 0pt; left: 0pt; }
#zoom a img { border: 0pt none ; }
#zoom a.p1:hover { text-decoration: none; background-color: rgb(140, 151, 163); color: rgb(0, 0, 0); }
#zoom a .large { border: 0px none ; display: block; position: fixed; width: 1px; height: 1px; top: -1px; left: -1px; }
#zoom a.p1:hover .large { border: 1px solid black; display: block; position: fixed; top: 0px; left: 250px; width: 300px; height: 200px; }

xhtml(其中一张图片“缩放”)>>>>>>>

<div id="zoom" style="height: 106px; width: 150px;  height: 106px; left: 1400px; position: absolute; top: 325px; width: 150px; z-index: 1; " class="tinyText">
    <div style="position: relative; width: 150px; ">
        <a class="p1" href="Camera_Sears_35_RF.html" title="Camera_Sears_35_RF.html">
            <img src="All2020_files/shapez" alt="" style="height: 106px; left: 0px; position: absolute; top: 0px; width: 150px; " />
            <img class="large" src="All2020_files/z" title="Enlarged view of image" alt="Enlarged view of image" />
        </a>
    </div>
 </div>

再次感谢!!

Answer 1

z-index 仅影响同一“堆叠上下文”中的其他定位元素。由于 #zoom 内的 div 也是相对定位的，因此 anchor 上的 z-index 无效。

尝试将 z-index 应用于 div，而不是 anchor 。所以添加以下内容应该会有所帮助:

#zoom>div:hover {
  z-index: 9;
}