javascript - 将鼠标悬停在上面

Question

我对想要达到的效果有疑问。

当我将鼠标放在这个元素上时:

<div class="process">
  <h3 class="text-center">Process</h3>
  <ul class="row text-center list-inline  wowload bounceInUp animated" style="visibility: visible; animation-name: bounceInUp;">
    <li data-id="Reflexion">
      <span><i class="fa fa-flask"></i><b>Reflexion</b></span>
    </li>
  </ul>
</div>

我想在整个页面上覆盖一个覆盖层，并在这个覆盖层上覆盖我的 <ul>...</ul>

我试过 z-index和 position但它不起作用，我的覆盖总是覆盖整个页面和 <ul>...</ul>

这里是<ul></ul>的样式和 .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');
    },
});

---

更新

有一个Fiddle这比言语更能说明我的麻烦

Answer 1

当我制作叠加层时，我通常使用绝对定位来使其正确。在不知道您具体想要什么效果的情况下，这里有一个叠加层可能如何工作的通用演示。

fiddle

通过将叠加层的位置设置为 absolute，并将其所有位置属性设置为 0，它可以完全覆盖绑定(bind)到的框，而不必担心设置宽度或高度。

希望这对您有所帮助!

编辑

我知道你已经解决了这个问题，但对于那些可能稍后会看的人，这里有一个链接到一个问题已经解决的 fiddle 。

fiddle