css - LESS，悬停代码可以写成不同的吗？

Question

我已经在 LESS 上工作了很长一段时间并且对它非常熟悉。但我一直在四处摸索，看看 LESS 能做些什么。

.col-three{
  padding: 20px 0;
  height: 640px;

  aside{
    height: 100%;
    background-position: center;
    background-repeat: no-repeat; 
    background-size: cover;
    position: relative;

    .text{
      .fsize(43px);
      color: @white;
      .bold;
      .uppercase;
      position: absolute;
      top:50%; 
      left: 50%;
      .centerposition;
      word-spacing: 9999999px;
      .alcenter;

      span {
        background: rgba(184,181,175,0.8);
        line-height: 140%;
        .transition();
      }
    }
  }

  &:nth-child(2){
    padding: 0;

    aside {
      .text {
        .fsize(62px);
        width: 100%;
      }
    }
  }

  &:hover{
    aside > .text > span {
      color:@black
    }
  }
}

上面的代码工作得很好，当我将鼠标悬停在 .text 中的 .col-three 和 span 时，它所做的就是将颜色更改为黑色。工作得很好。但是我的问题是是否可以编写这段代码

  &:hover{
    aside > .text > span {color:@black}
  }

以任何不同的方式，这样我就不必指向 .col-three 的所有子元素来达到 span。

提前致谢。

Answer 1

如果你可以有一个用于悬停的选择器包装器......

<div class="hover-wrapper">
   <div class="col-threee">
      ...original hierarchy...
   </div>
</div>

你可以使用...

.col-three{
  ...

  aside {
    ...

    > .text {
      ...

      > span {
         ...
         .hover-wrapper:hover & {
            color:black;
         }
      }
    }
  }  
}