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，它将覆盖它完全绑定的框，而不必担心设置宽度或高度。

希望这有帮助！

修改

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

fiddle

Answer 2

Z-index属性仅在手动定位两个元素时才有效。确保列表中也包含position: relative或position: absolute，而不仅仅是叠加层。然后，您需要为列表的z-index提供高值。

编辑：尝试将此添加到您的代码中：

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

你必须实际玩Z-index以确保只有悬停的面板位于叠加层前面，如果这是你想要的，但这证明你需要设置你想要的位置属性手动z-located。

鼠标悬停在

2 个答案: