我可以使用LESS css标记应用:hover伪选择器吗?

cwd*_*cwd 29 html css less

在LESS中我可以应用这样的两个规则来影响隐藏下划线的链接的文本样式,除非悬停:

.read-more
{
    a
    {
        text-decoration:none;
    }
    a:hover
    {
        text-decoration:hover;
    }
}
Run Code Online (Sandbox Code Playgroud)

但我觉得我也应该能够定义两个这样的规则:

.reverseHover
{
    text-decoration:none;
}

.reverseHover:hover
{
    text-decoration:hover;
}
Run Code Online (Sandbox Code Playgroud)

然后使用a mixin来获得这两个规则:

.read-more{
    a
    {
        .reverseHover;
    }
}
Run Code Online (Sandbox Code Playgroud)

无需明确地执行以下操作:

.read-more{
    a{
        .reverseHover;
    }
    a.reverseHover:hover
    {
        .reverseHover;
    }
}
Run Code Online (Sandbox Code Playgroud)

那可能吗?

Dan*_*ses 65

您可以使用引用父选择器&.你甚至可以在mixin中使用父选择器.文档可在lesscss.org找到.以下是解决方案.

.reverseHover {
    text-decoration:none;
    &:hover { text-decoration:underline; }
}
.read-more
{
    a
    {
        .reverseHover
    }
}
Run Code Online (Sandbox Code Playgroud)