Javascript 在一条线后滑动多个div时出现屏蔽问题

我有一个

CSS

动画效果，由于分层问题很难实现。请参见下面的代码段：

var toggle=document.getElementById（'toggle'）；
函数toggleF（）{
"严格使用",；
document.querySelector（'nav'）.classList.add（'fuzzyState'）；
}
toggle.addEventListener（'click'，toggleF）
正文{
身高：90%；
颜色：#222；
文本对齐：中心溢出：隐藏；
}
钮扣{
大纲：0；
光标：指针
}
#拨动{
浮动：左；
宽度：38px；
高度：38px；
填充物：5px；
保证金：自动；
背景：#fff；
颜色：#666；
边界：0；
字体大小：150%
}
#切换：悬停{
背景：#222；
颜色：#eee；
用户选择：无；
-webkit用户选择：无
}
#切换：活动{
背景:#022；
颜色：#fff
}
海军ul：之后{
内容“；
显示：块；
清楚：两者都有
}
导航ul{
高度：150像素；
保证金：0；
填充：0；
字体大小：150%
}
李海军{
宽度：140px；
高度：140像素；
保证金：5px；
浮动：左；
列表样式：无；
用户选择：无；
-webkit用户选择：无
}
导航按钮{
显示：块；
位置：相对位置；
最高：50%；
宽度：100%；
身高：100%；
背景：透明；
边界：0；
文本转换：大写；
转换：translateY（-50%）
}
导航按钮：悬停{
背景:#022；
颜色：#eee
}
导航按钮：激活{
背景:#033；
颜色：#fff
}
ul hr{
位置：相对位置；
最高：50%；
宽度：1px；
高度：90px；
利润率：10px；
背景：#eee；
边界：0；
浮动：左；
转化：translateY（-50%）；
z指数：2
}
导航模糊状态#dos{
转换：translateX（230px）
}
导航模糊状态#uno{
转换：translateX（400px）；
-webkit过滤器：模糊（1px）
}
导航模糊状态{
/*转换：translateX（-230px）*/
}
导航树{
位置：相对位置；
z指数：1
}
#左导航掩码{
背景：#fff；
位置：绝对位置；
最高：15%；
右：0；
左：356px；
宽度：200px；
高度：190px；
文本对齐：对齐；
转化：translateY（-50%）；
}
#右导航掩码{
背景：#fff；
位置：绝对位置；
最高：15%；
右：0；
左：156px；
宽度：200px；
高度：190px；
文本对齐：对齐；
转化：translateY（-50%）；
z指数：-1
}
#dos，
#特雷斯{
过渡：变换0.7秒缓进缓出
}
#乌诺{
转换：转换1s轻松输入输出，-webkit过滤器1s轻松输入输出；
}
+

uno
dos

tres

这个问题已经问了很久了，因此，您很可能已经找到了解决方案。但以防万一，这里你有一个可能的方法来实现你想要的目标

与其使用背景颜色相同的绝对定位div来覆盖动画
li
元素，为什么不在
ul
容器中使用
overflow
hidden
属性？如果执行此操作，
ul
将充当“遮罩”，并且当
li
元素在
ul
外部设置动画时，它们将自动“隐藏”。看看您已经使用这种方法修改过的代码片段（我使用了两个
ul
元素来分别设置
li
元素的动画）：

我看到您在
ul
元素中放置了一个
hr
（和两个
div
）和一个
ul
。对于这个解决方案，我使用了一个伪元素来模拟垂直线


var toggle=document.getElementById（'toggle'）；
函数toggleF（）{
document.querySelector（'nav'）.classList.toggle（'fuzzyState'）；
}
toggle.addEventListener（'click'，toggleF）
正文{
颜色：#222；
}
钮扣{
光标：指针；
大纲：0；
}
#拨动{
背景：#fff；
边界：0；
颜色：#666；
浮动：左；
字体大小：150%；
高度：38px；
保证金：自动；
填充物：5px；
宽度：38px；
}
#切换：悬停{
背景：#222；
颜色：#eee；
用户选择：无；
}
#切换：活动{
背景:#022；
颜色：#fff
}
导航ul{
显示：内联块；
字体大小：150%；
保证金：0；
溢出：隐藏；
填充：0；
位置：相对位置；
}
左导航：：后导航{
内容：“；
显示：块；
右边框：1px实心#eee；
高度：90px；
位置：绝对位置；
右：0；
最高：50%；
转化：translateY（-50%）；
}
李海军{
显示：内联块；
高度：140像素；
列表样式：无；
保证金：5px；
用户选择：无；
转换：转换0.7s轻松输入输出；
宽度：140px；
}
导航按钮{
背景：透明；
边界：0；
显示：块；
身高：100%；
位置：相对位置；
文本转换：大写；
最高：50%；
转化：translateY（-50%）；
宽度：100%；
}
导航按钮：悬停{
背景:#022；
颜色：#eee；
}
导航按钮：激活{
背景:#033；
颜色：#fff；
}
导航模糊状态ul>li{
指针事件：无；
}
导航模糊状态ul.左>李{
转化：translateX（200%）；
}
导航模糊状态ul.右>li{
转化：translateX（-100%）；
}
+

乌诺
dos


特雷斯

1和2的动作是正确的，但你想让3滑到那条线后面的左边吗？@Leeish，准确地说。如果您在我的CSS中为
nav.fuzzyState#tres
取消注释代码，您将能够看到发生了什么#我认为这是不可能做到的，但我正在投票，看是否有人能做到。您想要的z索引的堆叠顺序是不可能的。你也许可以用javascript做一些疯狂的计时，但我很想看看是否有人能在没有JS的情况下完成它。@Leeish看起来我们有一个赢家。Duh。我被困在尝试像你一样使用堆叠。溢出效果很好。