如何讓懸停的底部邊框重疊div下面？

我有一個使用無序列表的水平導航菜單。在菜單下面有一條灰色直線，必須有父容器的寬度爲100％。當懸停列表元素時，行的部分必須在列表元素下方着藍色。我找不到任何合適的方法來做到這一點。我使用position：relative並添加了top：14px，但它並不真正令我滿意，因爲對字體大小或字體的任何更改都會破壞所有內容。我還考慮過將元素間的邊距改爲填充，增加li的高度，並給每個元素設置相同的灰色邊框，並在懸停時更改其顏色，但我需要沿着父div的寬度遍歷整行。它是如何看： expected result 如何讓懸停的底部邊框重疊div下面？

我當前的代碼：

#container { 
 
    width: 80%; 
 
    margin: auto; 
 
    background-color: white; 
 
} 
 

 
#container ul { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-top: 5px; 
 
    margin-bottom: 10px; 
 
} 
 

 
#container ul li { 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 

 
#container ul li:first-child { 
 
    margin-left: 0; 
 
} 
 

 
#container ul li a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
#container ul li a:hover { 
 
    color: grey; 
 
} 
 

 
#container #slider { 
 
    display: inline-block; 
 
    height: 5px; 
 
    background-color: #f1f1f1; 
 
    width: 100%; 
 
}

<div id="container"> 
 
    <ul> 
 
    <li><a href="#">INDEX</a></li> 
 
    <li><a href="#">HELP</a></li> 
 
    <li><a href="#">LONG LINK TEXT</a></li> 
 
    </ul> 
 
    <span id="slider"></span> 
 
</div>

的jsfiddle：https://jsfiddle.net/9fhvyk76/3/

來源

2017-10-05 A. Cole

你想使你有更多使用僞元素控制大小/位置，而不需要改變太多。只需添加位置：相對於鏈接本身，僞指令的縮放和定位就與它相關聯。讓我知道這是你在找什麼！

https://jsfiddle.net/g00jrsqf/

#container ul li a{ 
    position: relative; 
} 
#container ul li a:after{ 
    content: ''; 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 4px; 
    background: #01a2e8; 
    opacity: 0; 
    left: 0; 
    bottom: -29px; 
} 
#container ul li:hover a:after{ 
    opacity: 1; 
}

來源

2017-10-05 16:36:41 will

如何讓懸停的底部邊框重疊div下面？

回答

相關問題