Javascript 在鼠标上方做一个覆盖

我有一个我想要达到的效果的麻烦

当我将鼠标放在该元素上时：

过程


反射

我想在整个页面和我的

..

我试过使用

z-index

和

position

，但它不起作用，我的覆盖始终覆盖在整个页面和

..

下面是
和
.overlay

.process ul li{
    width: 10em;
    height: 10em;
    border: 1px solid #CEEBF0;
    padding: 0;
    border-radius: 50%;
    margin: 0 1.25em;
    line-height: 13.5em;
    color: #21ABCA;
     -webkit-transition: border-color 0.5s ease-in; /* Safari */
     -moz-transition: border-color 0.5s ease-in; /* Firefox */
    transition: border-color 0.5s ease-in;
}
.process ul li span{line-height: 2em;display: inline-block;font-weight: 300;}
.process ul li span i{font-size: 3em;}
.process ul li span b{display: block;font-size: 1em;font-weight: 300;}

.process ul li:hover {
    border-color:#3498db;
    background-color: rgba(52, 152, 219,1.0);
}

.overlay {
    position: fixed;
    z-index: 50;
    background-color: red;
    height: 100vh;
    width: 100vw;
}

下面是我用来监听鼠标事件的脚本：

$(".process ul li").on({
    mouseenter : function() {
        $('#overlay').addClass('overlay');
    },
    mouseleave : function() {
        $('#overlay').removeClass('overlay');
    },
});


更新

有一种比文字更能显示我的麻烦的方法
当我做叠加时，我通常使用绝对定位来正确定位。在不知道您具体想要什么效果的情况下，下面是一个覆盖层如何工作的通用演示


通过将覆盖的位置设置为
绝对
，并将其所有位置属性设置为0，可以完全覆盖绑定到的框，而无需担心设置宽度或高度

希望这有帮助

编辑

我知道你已经解决了这个问题，但是对于那些稍后可能会看的人来说，这里有一个链接，指向一把小提琴，这个问题已经解决了

仅当手动定位两个元素时，Z索引属性才起作用。确保列表也有
位置：相对
或
位置：绝对
，而不仅仅是覆盖。然后需要为列表的z索引提供一个更高的值

编辑：尝试将其添加到代码中：

.process {
    position: relative;
    z-index: 100;
}

如果你想要的话，你必须实际使用Z-index来确保只有悬停的面板在覆盖层的前面，但这证明您需要在手动z定位的对象上设置一个位置属性。
您没有在提供的CSS片段中包含class
over1
…找不到
process
classI通常使用
position:absolute
进行覆盖。你尝试过这个，但它不起作用？显示完整的DOM，不仅是
代码片段我制作了一个代码片段，以便更好地查看问题thx man，但这里没有问题，如果你想查看我的trouble@wilson我做了一个…这就是你需要的吗？太棒了！最后，@Jacque Goupil的回答并不好。这正是我想要的，但我的英语太差了，我想我的解释很不清楚。你只是在一件事上设定了z指数。我提到的几乎所有内容都不在您的代码中。那不行。这解决了我的问题！多大的错误啊。。。但是现在它工作了，我今天不能投票，因为我达到了极限，但是明天我投票了。你的最后一次编辑正在工作，但是我不想覆盖我所有的
。进程
div，具有“结束”状态的
元素应该超过所有其他元素