SCSS :hover - CSS

SCSS 是一种 CSS 预处理器，它增加了许多实用的功能，包括 :hover 伪类的扩展。SCSS 的 :hover 扩展可以让我们更灵活地控制元素的样式，使得我们可以在样式表中更轻松地实现互动效果。

:hover

:hover 是 CSS 伪类中的一种，它表示当鼠标悬停在指定元素上时应用的样式。在 SCSS 中，我们可以更方便地对 :hover 进行扩展。

button {
  &:hover {
    background-color: #333;
    color: #fff;
  }
}

在这个例子中，我们使用 & 符号表示当前元素，然后在其后跟着 :hover，这样就可以为 button 元素的 :hover 状态应用样式。我们还可以使用下列语法写法：

button {
  &:hover,
  &:focus {
    /* styles */
  }
}

这样可以在按钮获得焦点或悬停时应用样式。

利用 :hover 扩展实现 CSS 的状态样式

除此之外，我们还可以使用 :hover 扩展来模拟其他状态样式，例如禁用状态。例如：

button {
  &:disabled,
  &[disabled],
  &.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
  }
  &:hover:not(:disabled) {
    background-color: #333;
    color: #fff;
  }
}

在这个例子中，我们使用 & 符号表示当前元素，然后在其后跟着各种状态样式的选择器，使用逗号分隔开多个选择器。我们还可以使用 &:not(:disabled) 来表示悬停状态时元素未被禁用的情况。

小结

使用 SCSS 的 :hover 扩展，我们可以更灵活地模拟元素的状态样式，使得样式表更加具有互动性，增强用户体验。当然，我们还可以使用 SCSS 的其他伪类扩展来实现更为复杂的互动效果。