Html 我可以应用带有 LESS css 标记的 :hover 伪选择器吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8491835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I apply a :hover pseudo selector with the LESS css markup?
提问by cwd
In LESS I can apply two rules like this to affect text styling of links to hide underline unless hovered:
在 LESS 中，我可以应用两个这样的规则来影响链接的文本样式以隐藏下划线，除非悬停：
.read-more
{
a
{
text-decoration:none;
}
a:hover
{
text-decoration:hover;
}
}
But I feel like I should also be able to define two rules like this:
但我觉得我也应该能够定义两个这样的规则：
.reverseHover
{
text-decoration:none;
}
.reverseHover:hover
{
text-decoration:hover;
}
And then use a mixinto get both rules:
然后使用 amixin来获取这两个规则：
.read-more{
a
{
.reverseHover;
}
}
Without having to explicitly do something like this:
无需明确地做这样的事情：
.read-more{
a{
.reverseHover;
}
a.reverseHover:hover
{
.reverseHover;
}
}
Is that possible?
那可能吗？
回答by Daniel Moses
You can reference the parent selector using &. You can even use a parent selector in a mixin. Documentation is found at lesscss.org. Below is the solution.
您可以使用&. 您甚至可以在 mixin 中使用父选择器。文档位于lesscss.org。下面是解决方案。
.reverseHover {
text-decoration:none;
&:hover { text-decoration:underline; }
}
.read-more
{
a
{
.reverseHover
}
}
