SCSS背景Hover

Question

当我在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？

Answer 1

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

Answer 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 {
        ...
      }
   }
}

Answer 3

您需要将选择器&:hover添加到公共hover effect的占位符选择器%btn-shared中。但是，如果您希望对每种类型的按钮都有不同的&: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;
        }
    }
}