我能否在LESS CSS标记中使用:hover伪选择器？

Question

30

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

.read-more
{
    a
    {
        text-decoration:none;
    }
    a:hover
    {
        text-decoration:hover;
    }
}

但是我觉得我也应该能够像这样定义两个规则：

.reverseHover
{
    text-decoration:none;
}

.reverseHover:hover
{
    text-decoration:hover;
}

然后使用 mixin 来获取这两个规则：

.read-more{
    a
    {
        .reverseHover;
    }
}

不需要明确地做这样的事情：

.read-more{
    a{
        .reverseHover;
    }
    a.reverseHover:hover
    {
        .reverseHover;
    }
}

这是否可能？

- cwd

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Moses · Accepted Answer

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

.reverseHover {
    text-decoration:none;
    &:hover { text-decoration:underline; }
}
.read-more
{
    a
    {
        .reverseHover
    }
}