css - 嵌套 SCSS 以在 :hover 上更改::after 的背景颜色

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

I understand I might have other conflicts. But am I at least nesting this order correctly?

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

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

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

如果你想在 a:hover 上改变 ::after 的色调，你能做的最好的就是这样，因为伪元素必须最后出现，但 :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 部分)