使用 SASS 的 "&:hover" 中的 "&" 表示什么？

问题描述

&:hover {
    .line-1,.line-2,.line-3 {
      background-color: #fff;
    }
  }

  &.active {

    .line-1,.line-3 {
      background-color: #fff;
    }


    .line-1 {
      animation: animate-line-1 .7s $cubic-bezier-in forwards;
    }
    .line-2 {
      animation: animate-line-2 .7s $cubic-bezier-in forwards;
    }
    .line-3 {
      animation: animate-line-3 .7s $cubic-bezier-in forwards;
    }
  }
}

解决方法

&:hover 的意思是“当这个元素被悬停时，然后设置它的样式”。

例如：

.button {
    background: red;

    &:hover {
        background: green;
    }
}

这意味着：按钮的默认背景颜色是红色，但是当您将其悬停时，背景会变为绿色。

这段代码相当于：

.button {
    background: red;
}

.button:hover {
    background: green;
}

上面的代码是使用“SASS”编写的，这是一种编写 CSS 的新方法。您可以在此处找到更多相关信息： Sass。