展開懸停時無法使用底部邊框？

Question

我想要做的和我正在使用的（一些）代碼是在回答另一個問題，特別是「從中心擴展」回答here 。描述效果根本沒有發生。有任何想法嗎？

HTML

<ul id="items"> 
    <li> <span id="menuBtnOff" onclick="menuIn()">&#x2573;</span></li> 
    <li> <a href="#about" rel=""> About Me </a> </li> 
    <li> <a href="#profile" rel=""> What I can do for you </a> </li> 
    <li> <a href="#footer" rel=""> Contact </a> </li> 
</ul> 

薩斯

li:hover 
    a 
     cursor: pointer 
     color: $menuGreen 
     transition: all 0.1s ease-in-out 

    li, #menuBtnOn 
    transition: all 0.1s ease 
    text-indent: initial 
    resize: none 
    float: right 
    display: inline-block 
    padding: 15px 
    line-height: 5px 
    font-family: 'Roboto', sans-serif 
    font-weight: lighter 
    font-size: 14px 
    color: black 
    &:not(:first-child) 
     border-right: 1px solid rgba(37, 37, 37, 0.28) 
    a:after 
     content: '' 
     border-bottom: solid 3px $menuGreen 
     transform: scaleX(0) 
     transition: transform 250ms ease-in-out 
     a:hover:after 
     transform: scaleX(1) 

我的全碼記錄here

Answer 1

有你的代碼的兩個主要問題（而不是語法錯誤等）：

• Yo你沒有將display: block設置爲a:after僞元素。這是強制性的，因爲它提供僞元素的高度和寬度。沒有這個，僞元素將是0 x 0px，所以你不會看到任何東西。
• 您的Sass代碼縮進的方式（我假設您使用的是Sass語法，而不是基於缺少冒號，大括號和縮進的SCSS）意味着a:hover:after選擇器嵌套在a:after選擇器下，因此最終選擇器輸出將是.menuHolder li a:after a:hover:after。這與任何元素都不匹配，因此懸停時沒有任何反應。

除了這兩個變化，還有3個地方的縮進不一致。這是有5/7空間提供的地方，而不是正常的2/4/6/...

在Sass語法中的固定代碼將如下。具有等效SCSS語法的演示可用here。我使用SCSS語法進行演示，因爲JSFiddle不支持Sass語法。

a:link, a:visited 
    text-decoration: none 
    color: black 

.menu 
    white-space: nowrap 
    overflow: hidden 

.menuHolder 
    overflow: hidden 
    position: fixed 
    display: inline-block 
    top: 0 
    right: 0 
    width: 110% 
    padding: 6px 0 0 
    background-color: rgba(70, 106, 135, 0.65) 
    text-align: right 
    transition: all 1s ease-in-out 
    max-height: 37px 
    z-index: 10 

    ul 
    margin: 0 
    padding: 0 

    li:hover 
    a 
     cursor: pointer 
     color: $menuGreen 
     transition: all 0.1s ease-in-out 

    li, #menuBtnOn 
    transition: all 0.1s ease 
    text-indent: initial 
    resize: none 
    float: right 
    display: inline-block 
    padding: 15px 
    line-height: 5px 
    font-family: "Roboto", sans-serif 
    font-weight: lighter 
    font-size: 14px 
    color: black 

    &:not(:first-child) 
     border-right: 1px solid rgba(37, 37, 37, 0.28) 

    a:after 
     display: block 
     content: "" 
     border-bottom: solid 3px $menuGreen 
     transform: scaleX(0) 
     transition: transform 250ms ease-in-out 
     margin-top: 10px 

    a:hover:after 
     transform: scaleX(1) 

    #menuBtnOff, 
    #menuBtnOn 
    transition: all 0.3s ease 
    cursor: pointer 
    color: black 

    &:hover 
     color: $menuGreen 

    #menuBtnOn 
    font-size: 20px 
    float: left 

---

一個額外的改進，我會建議是穿上li本身:hover效果（也就是有選擇的.menuHolder li:hover a:after代替.menuHolder li a:hover:after），因爲文本顏色的改變發生在li本身的:hover，這將使其一致。

Here是此版本的演示。