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
    }
  }
}

上面的代码非常正常，当我将.col-three span内的.text更改为黑色时，它的作用是什么。作品非常好。但我的问题是是否可以编写此代码

  &: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;
         }
      }
    }
  }  
}

不用，可以用不同的方式编写悬停代码吗？

1 个答案: