嵌套SCSS以改变:: after on：hover的背景颜色

Question

目的

将鼠标悬停在链接上时呈橙色。

默认情况下暗色调。

我知道我可能还有其他冲突。但我至少正确地嵌套了这个订单吗？

背景

我之前遇到过这个问题，想要在我的图像上设置彩色图层。我能够在那里得到更暗的层。但是当盘旋时，不应该看到暗层，而是用橙色色调代替。

代码

我有demo on CodePen

HTML

<li>
  <a href="">
    <img src="http://www-tc.pbs.org/prod-media/newshour/photos/2013/07/10/Tesla_circa_1890_slideshow.jpeg">
  </a>
</li>

SCSS

li {
  > a::after {
    background-color: rgba(30,30,30,0.6);

    &:hover {
      background-color: rgba(255,128,0,0.5);
    }
  }
}

Answer 1

  

我知道我可能还有其他冲突。但我至少正确地嵌套了这个订单吗？

嵌套似乎不正确。在选择器3中，这是所有浏览器当前实现的标准，伪类可能不会出现在伪元素之后，但在:hover规则中有::after规则，即伪 - 伪元素中的类。如果Sass没有完全拒绝编译你的代码，那么可能它会把它编译成这样的东西：

li > a::after:hover {
  background-color: rgba(255,128,0,0.5);
}

这不是有效的CSS，所以它不会工作。

如果您希望更改::after上a:hover的色调，那么您可以做的最好的是，因为伪元素必须出现在:hover的最后}是你的规则不同的地方：

li {
  > a {
    &::after {
      background-color: rgba(30,30,30,0.6);
    }
    &:hover {
      &::after {
        background-color: rgba(255,128,0,0.5);
      }
    }
  }
}

（如果您不需要如此精细的嵌套量，可选择展平li > a和&:hover::after部分