SASS:之后:悬停选择器

时间:2016-04-29 19:30:04

标签: css sass css-selectors

如何在悬停状态下的伪选择器中使用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;
            }
        }
    }
}

1 个答案:

答案 0 :(得分:9)

使用&:hover:after {}定位正在悬停的元素的after伪元素。

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