SASS - 在 :hover 时将转换器应用于 ::after答案

【问题标题】：SASS - Applying changer to ::after when :hoverSASS - 在 :hover 时将转换器应用于 ::after
【发布时间】：2017-08-17 11:15:21
【问题描述】：

我正在尝试在 :hover 时对 ::after 元素应用更改，但它不起作用，这是我的代码，请告诉我出了什么问题，谢谢！

&::after
  content: ""
  width: 100%
  height: 100%
  background:
    image: url('../img/couverture.jpg')
    size: cover
    position: center
    repeat: no-repeat
  //outline: 1px solid red
  position: absolute
  z-index: 1
  &::after:hover
    outline: 1px solid red

【问题讨论】：

发布您的完整代码
&:hover 在&::after 的同一缩进中怎么样
第二个::after 是否打算嵌套在第一个中？这就是您当前的代码读取方式。添加花括号会使事情更清楚。
::after 似乎不能悬停；像普通 CSS div::after:hover { color:red; } 这样简单的东西在任何浏览器中都不起作用。见fiddle。除非我做错了什么。
如果有人能找到关于您是否可以悬停伪元素的神谕页面（W3C、WHATWG、浏览器制造商...），那就太好了。

标签： css sass pseudo-element

【解决方案1】：

您应该像下面这样在 after 中缩进悬停：

.element {
    &:after {
        &:hover {
            styling:here;
        }
    }
}

【讨论】：

【解决方案2】：

而不是

:after:hover

试试

:hover:after

【讨论】：

【解决方案3】：

我猜你渲染的 CSS 会是这样的，

Element::after::after:hover{ outline: 1px solid red }

这是无效的，:after 上的 hover 也不起作用。

【讨论】：