嵌套 SCSS 以更改 ::after on :hover 的背景颜色答案

【问题标题】：Nesting SCSS to change color of background of ::after on :hover嵌套 SCSS 以更改 ::after on :hover 的背景颜色
【发布时间】：2016-02-22 08:40:14
【问题描述】：

目标

将鼠标悬停在链接上时显示为橙色。

默认为深色调。

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

背景

我之前遇到过这个问题，想要在我的图像上添加一个彩色图层。我能够在那里得到较暗的层。但是当悬停在上面时，应该看不到暗层，而是用橙色代替。

代码

我有这个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);
    }
  }
}

【问题讨论】：

类似这样的东西：codepen.io/anon/pen/QjoeRb ?
@Jack 很好，是的，效果很好。出于某种原因，当我将代码实现到我的真实项目中时，黑色层仍然存在而不是橙色。
除非你有Sass->CSS编译问题，只发布编译好的CSS（不要使用sass相关的标签）
@JGallardo：你能用你真实项目的代码创建一个演示吗？问题似乎出在代码的其他地方。
对我来说似乎是一个非常简单的纯 SCSS 创作问题。欺骗链接告诉你什么构成了有效的 CSS，但没有说明如何根据给定的代码从 SCSS 中得到它（除了完全废弃它并只编写纯 CSS，在这种情况下，为什么还要有预处理器呢？）。

标签： css sass

【解决方案1】：

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

嵌套似乎不正确。在当前所有浏览器都实现的标准 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 部分）

【讨论】：