CSS：悬停：在不按预期工作之前

Question

我一直在使用主题并试图整理一些部分。

创建者使用：before和：after来获取菜单中虚线的效果。问题是，当我将鼠标悬停在li上时，它显示左侧垂直线正常，但链接的破折号消失了

这是JSBIN

/* horizontal lines that disappear */
.nav-list > li .submenu > li:before,
.nav-list > li .submenu > li > ul > li:before {
    content: "";
    display: block;
    position: absolute;
    width: 9px;
    left: 25px;
    top: 17px;
    border-top: 1px dashed rgba(255,255,255,0.5);
}

.nav-list > li .submenu > li > ul > li:before {
    width: 22px;
}

/* vertical lines the stay */
.nav-list > li .submenu > li:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 22px;
    width: 0;
    border-left: 1px dashed rgba(255,255,255,0.5);
}

Answer 1

悬停时的背景颜色覆盖虚线。您可以使用z-index来解决此问题。

.nav-list > li .submenu > li:before,
.nav-list > li .submenu > li > ul > li:before {
    z-index: 1;
}

Answer 2

显示:after伪元素，因为它在 DOM中的a元素之后出现（因此它在上方堆叠元素 - 因为它们是兄弟元素而有意义。）

:before伪元素未显示，因为它正在其上方出现的a元素背景重叠。这是因为:before伪元素在 DOM中的a元素之前出现。

要解决此问题，您只需要增加z-index伪元素的:before（默认情况下为auto）。

这样做时，:before伪元素在悬停在锚元素上时不会重叠，因为stacking context is established（顺序很重要，因为它们是兄弟姐妹）。

Updated Example

.nav-list > li .submenu > li:before,
.nav-list > li .submenu > li > ul > li:before {
    content: "";
    display: block;
    position: absolute;
    width: 9px;
    left: 25px;
    top: 17px;
    border-top: 1px dashed rgba(255,255,255,0.5);
    z-index: 1;
}

Answer 3

之前的元素被“覆盖”，

添加z-index可以解决问题：

/*add it to this block of CSS*/
.nav-list > li .submenu > li:before,
.nav-list > li .submenu > li > ul > li:before {
content: "";
display: block;
position: absolute;
width: 9px;
left: 25px;
top: 17px;
border-top: 1px dashed rgba(255,255,255,0.5);
z-index:111
}