LESS CSS的命名规则上悬停

Question

子选择在更短的，您可以按以下引用子选择：

<div class="button"> 
    <div class="button-text"> Text </div> 
</div> 

.button { 
    &-text { 
    color:red; 
    } 
} 

这将输出：

.button .button-text { color:red; } 

这是整洁和理想的，但是，当使用悬停时，是否有办法为子元素维护相同/相似的语法？目前，这不会自然地工作：

.button { 
    &:hover { 
    &-text { 
     color:red; 
    } 
    } 
} 

这将无法工作，正如所料，输出沿

.button:hover .hover-text { } 

线的东西是否有一种方式来获得期望的结果悬停没有定义完整的类名，在这个例子中是“.button-text”？

任何帮助将不胜感激。

Answer 1

因为父母选择器&代表所有父级选择器（不只是最近的祖先），所以在鼠标悬停下的嵌套将始终包含:hover文本。

这条规则：

.button { 
    &:hover &-text { 
    color:red; 
    } 
} 

将提供结果（lessismore playgroud）：

.button:hover .button-text { 
    color: red; 
}