css - 使用 scss 将伪元素悬停在父类上

Question

如何将以下 CSS 转换为 SCSS？

.parent-class:hover .child-class {
  visibility: visible;
  animation-name: bounceIn;
  animation-duration: 450ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  transition-delay:0s;
}

下面的代码似乎不起作用:

.parent-class{
  &:hover .childclass{
    visibility: visible;
    animation-name: bounceIn;
    animation-duration: 450ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transition-delay:0s;
  }
}

Answer 1

你的 scss 有正确的想法——除了你的类名有错别字:

.childclass -> .child-class

.parent-class{
  &:hover .child-class{
    visibility: visible;
    animation-name: bounceIn;
    animation-duration: 450ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    transition-delay:0s;
  }
}