SCSS Background Hover-CodePudding

I am struggling to change the background of my link when I hover over it with SCSS. I am able to do so when I go back into my main.css, but I really want to understand what I can't see with 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;
      }
    }

Where do I implement the :hover ?

thank you :)

CodePudding user response：

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

CodePudding user response：

First, your selector &btn-shared is incorrect, I assume you meant to write a placeholder selector %btn-shared. Then, if you want the same hover for all your buttons you can set it directly in %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;
   }
}

However, if you need a different hover for each type of button then you need to set it for each of them separately:

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

CodePudding user response：

btn:hover {
  background-color: yellow;
}

you can add this