SCSS 背景悬停答案

【问题标题】：SCSS Background HoverSCSS 背景悬停
【发布时间】：2022-07-05 10:03:01
【问题描述】：

当我用 SCSS 将鼠标悬停在链接上时，我正在努力更改链接的背景。当我回到我的 main.css 时，我可以这样做，但我真的很想了解我在 SCSS 中看不到的内容。

%btn-shared {
 display:inline-block;
 padding: 0.8rem 2rem;
 transition: all 0.5s;
 border: none;
 cursor: pointer;
 }

.btn {
 &-main {
  @extend %btn-shared;
  color: #333;
  background: $main-color; 
  }
 &-light {
  @extend %btn-shared;
  color: #333;
  background: $main-color;
  }
 &-dark {
  @extend %btn-shared;
  color: #f4f4f4;
  background: $dark-color;
  }
}

我在哪里实现:hover？

【问题讨论】：

您的 SCSS 代码无效。 &btn-shared 看起来不对，@extend %btn-shared; 肯定不对。
感谢问题已解决！！

标签： html css sass node-sass

【解决方案1】：

.btn {
     &-main {
      background: $main-color;
      &:hover {
        background: yellow; 
      }
     &-light {
      background: $main-color;
      &:hover {
        background: yellow; 
      }
      }
     &-dark {
      background: $dark-color;
      &:hover {
        background: yellow; 
      }
      }

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

首先，您的选择器&btn-shared 不正确，我假设您打算编写一个占位符选择器%btn-shared。然后，如果您希望所有按钮都具有相同的悬停效果，可以直接在 %btn-shared 中进行设置：

%btn-shared {
   display: inline-block;
   padding: 0.8rem 2rem;
   transition: all 0.5s;
   border: none;
   cursor: pointer;
   
   &:hover {
     ...
   }
}

.btn {
   &-main {
      @extend %btn-shared;
      color: #333;
      background: $main-color; 
   }
   &-light {
      @extend %btn-shared;
      color: #333;
      background: $main-color;
   }
   &-dark {
      @extend %btn-shared;
      color: #f4f4f4;
      background: $dark-color;
   }
}

但是，如果您需要为每种类型的按钮设置不同的悬停，则需要分别为每个按钮进行设置：

.btn {
   &-main {
      @extend %btn-shared;
      color: #333;
      background: $main-color;
      
      &:hover {
        ...
      }
   }
   &-light {
      @extend %btn-shared;
      color: #333;
      background: $main-color;
      
      &:hover {
        ...
      }
   }
   &-dark {
      @extend %btn-shared;
      color: #f4f4f4;
      background: $dark-color;
      
      &:hover {
        ...
      }
   }
}

【讨论】：

我已经尝试了这些变体，但仍然无法正常工作。你能想出其他什么可以阻止这个工作吗？
@Neelam 您编译的代码是什么样的？可能是特异性的问题，或者你的代码编译不正确，或者缓存的问题……我只能猜测。

【解决方案3】：

您需要将选择器 &:hover 添加到内部占位符选择器 %btn-shared 以用于常见的 hover effect。但是，如果您想为每种类型的按钮使用不同的&:hover，那么您需要单独使用&:hover。

$main-color : #f6c13c;
$main-hover-color : #ab7a00;
$light-color : #cccccc;
$light-hover-color : #a2a0a0;
$dark-color : #555555;
$dark-hover-color : #000000;

%btn-shared {
    display: inline-block;
    padding: 0.8rem 2rem;
    transition: all 0.5s;
    border: none;
    cursor: pointer;
    &:hover {
        box-shadow: 0 4px 12px #b9b9b9
    }
}
.btn {
    &-main {
        @extend %btn-shared;
        color: #333;
        background: $main-color;
        &:hover {
            color: #f4f4f4;
            background: $main-hover-color;
        }
    }
    &-light {
        @extend %btn-shared;
        color: #333;
        background: $light-color;
        &:hover {
            color: #f4f4f4;
            background: $light-hover-color;
        }
    }
    &-dark {
        @extend %btn-shared;
        color: #f4f4f4;
        background: $dark-color;
        &:hover {
            background: $dark-hover-color;
        }
    }
}

【讨论】：