CSS：懸停：之前不按預期工作

我一直在使用一個主題，試圖整理一些部分。CSS：懸停：之前不按預期工作

創建者使用：before和：after在菜單中獲得虛線的效果。問題是，當我將鼠標懸停在李它顯示了左邊的垂直線確定，但短線的鏈接消失

這裏是一個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); 
}

來源

2015-03-31 Pierce McGeough

的:after僞元件顯示出來，因爲它似乎後在DOM中a元件（因此它被堆疊以上錨固元件 - 的順序是有意義，因爲它們是兄弟元素）。

enter image description here

的:before僞元件沒有顯示出來，因爲它是由將其出現它上面的a元素的背景重疊。這是由於以下事實：:before僞元素出現在之前元素在DOM中。

要解決這個問題，只需要增加:before僞元素的z-index（默認爲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; }

來源

2015-03-31 13:48:30

我曾試圖上懸停狀態的z-index （我自己添加了）。謝謝 – 2015-03-31 15:33:26

上懸停時的背景顏色覆蓋虛線。您可以使用z-index來解決這個問題。

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

來源

2015-03-31 13:48:19 Stickers

的前元素是越來越「覆蓋」，

增加的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 
}

來源

2015-03-31 13:55:15 maioman

CSS：懸停：之前不按預期工作

回答

相關問題