（使用 scss/css）我的按钮中的悬停动作不起作用

Question

所以我的问题正如我已经说过的，我在悬停按钮时看不到悬停动作

这是我在 html

中的按钮

<button class="btn">button</button>

这是我在 scss 中悬停的代码

 .btn{
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;
    :hover{
        background-color: aqua;
    }
}

这是 css 中 'sass watcher' 后的代码 css

.btn {
  background-color: #e5383b;
  font-variant-caps: all-petite-caps;
  border-radius: 2px;
}

.btn :hover {
  background-color: aqua;
}

这是显示结果的图片

（你看不到我的鼠标，但我悬停在它上面）

Answer 1

在您的鼠标悬停处添加一个“&”

.btn {
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;

    &:hover {
        background-color: aqua;
    }
}

Answer 2

您需要删除 .btn :hover { 上的 space。选择器之间的 space 表示嵌套元素，因此 .a .b { 将设置嵌套在 a.

中的 b 标签的样式

为此，您可以在像这样嵌套时向悬停状态添加一个符号。

.btn {
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;

    &:hover {
        background-color: aqua;
    }
}

& 符号表示您应该获取父元素并在此处替换它。所以 scss 将采用 .btn 并将其与 :hover 链接起来，您将获得预期的结果。

Answer 3

对于 SCSS，如果您要嵌套并想使用伪 class 或元素，您需要在任何伪 class 或伪元素

之前放置 &

SCSS:

.class {
    margin: 0;
    padding: 0;
    &:hover {                 // Notice the use of '&' before pseudo class 'hover' 
       background-color: red; 
    }
}

结果会像

.class {
    margin: 0;
    padding: 0;
}

.class:hover {
    background-color: red;
}

（使用 scss/css）我的按钮中的悬停动作不起作用

(using scss/css) the action hover in my button is not working

html

css

sass

button

hover