Css 位置：将鼠标悬停在某个元素的末尾'；s选择器在较短的时间内

似乎有一些东西在我看来是看不见的。我希望CSS中有类似的内容：

.animate.fade-in, .animate-hover.fade-in:hover {
  animation-name: fade-in;
}

我的目标是：

.animate, .animate-hover:hover {
  &.fade-in {
    animation-name: fade-in;
  }
}

但我得到的是：

.animate.fade-in, .animate-hover:hover.fade-in {
  animation-name: fade-in;
}

：输出中悬停的位置不正确。
请尝试以下操作：

.animate, .animate-hover {
    &.fade-in, &.fade-in:hover {
        animation-name: fade-in;
    }
}

老实说，我不确定这是否是最好的方法，但这是我看到这个问题时想到的第一个解决方案。但是，我要说的是，如果我处于您的情况，我可能会这样做。
您可以使用
淡入
作为父选择器来实现这一点（因为
&
是父选择器的占位符）

这将获得您所期望的：

.fade-in {
  .animate&, .animate-hover&:hover {
    animation-name: fade-in;
  }
}

这是一个棘手的情况，主要是因为这似乎是一个少就是多的情况。您可以重复
.animate
，而不是重复
.fade in
，如下所示：

更少

.animate {
   &.fade-in, &-hover.fade-in:hover {
      animation-name: fade-in;
  }
}

CSS输出

.animate.fade-in,
.animate-hover.fade-in:hover {
  animation-name: fade-in;
}

但是，输入越少，看起来就越复杂，几乎和直接执行预期的css输出一样长。因此，最好这样做。。。除非你用这个方法来构建一个MIXIN来做各种动画，这样的东西，比如：

.nameAnimation(@name) {
    .animate {
        &.@{name}, &-hover.@{name}:hover {
          animation-name: @name;
      }
    }
}

.nameAnimation(fade-in);
.nameAnimation(fade-out);
.nameAnimation(whaaa);

我不确定这是否是最好的方法，但这是我头脑中想到的解决方案。我相信这将生成2x2=4个选择器（所有可能的组合）@Mohebifar什么是错误的？在我的答案中有什么我可以改变的，使它更准确吗？它是：。animate.fade-in，。animate.fade-in:hover，。animate-hover.fade-in，。animate-hover.fade-in，。animate-hover.fade-in:hover{animation name:fade-in；}@Mohebifar哦，我明白了。ScottS的答案可能就是你想用的。少写一点的好办法+1.