Question

我正在尝试做的和我正在使用的（某些）代码是对另一个问题的回答，特别是“从中心扩展”答案https://www.talentcookie.com/2016/01/some-useful-regular-expression-terminologies/ 。描述效果根本就没有发生。任何想法？

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

您的代码存在两个主要问题（语法错误除外）：

您没有将display: block设置为a:after伪元素。这是强制性的，因为它是为伪元素提供高度和宽度的那个。如果没有这个，伪元素将为0 x 0px，因此您将看不到任何内容。
你的Sass代码缩进的方式（我假设你使用的是Sass语法，而不是基于缺少的冒号，大括号和缩进的SCSS语法）意味着a:hover:after选择器嵌套在{{1}下面选择器，所以最终的选择器输出将是a:after。这与任何元素都不匹配，因此悬停时没有任何反应。

除了这两个变化之外，还有3个地方的压痕不一致。那就是有些区域提供了5/7个空格而不是正常的2/4/6 /...

Sass语法中的固定代码如下。可以使用具有等效SCSS语法的演示here。我已经在演示中使用了SCSS语法，因为JSFiddle不支持Sass语法。

.menuHolder li a:after a:hover:after

我建议的另一项改进是将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效果放在:hover本身上（也就是说，选择器为li而不是.menuHolder li:hover a:after）因为文本颜色的变化发生在.menuHolder li a:hover:after本身的:hover上，这会使其保持一致。

Here是此版本的演示。

在悬停时展开底部边框不起作用？

1 个答案: