SASS :after :hover 选择器[重复]

Posted 2023-03-06

【中文标题】SASS :after :hover 选择器[重复]

【英文标题】：SASS :after :hover selector [duplicate]

【发布时间】：2016-08-25 01:48:47

【问题描述】：

如何在悬停状态下的伪选择器中使用 SASS 选择器？想要编写更少的代码并清理它。

首选方法，无效：

div 
    a 
        transition: all 0.25s ease-in-out;
        &:after 
            content: ">>";
            left: 10px;
            :hover & 
                left: 10px;
            
        
    

相对于：

div 
    a 
        transition: all 0.25s ease-in-out;
        &:after 
            content: ">>";
            left: 10px;
        
        &:hover 
            &:after 
                left: 10px;
            
        
    

【问题讨论】：

:hover & 目标:hover inside 的:after，而不是在上面，不是吗？

在第一个例子中。试图抓取外部父元素作为选择器。

你有没有查看编译输出？当只有一种可能的选择器顺序有效时，您必须按该顺序编写选择器。再多的愿望也不会改变任何事情。

【参考方案1】：

使用&:hover:after 定位被悬停元素的after 伪元素。

&:after:hover 将选择 after 伪元素并在悬停时使用。

【讨论】：

这可能是我能得到的最干净的了，我想。还不错。