'SCSS Background Hover

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 ?

htmlcsssassnode-sass


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[3]

You need to add selector &:hover to inside placeholder selector %btn-shared for common hover effect. However, If you want different &:hover for each type of button then you need &:hover separately.

$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;
        }
    }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Muhammed Shameel KT
Solution 2 Arkellys
Solution 3 Raeesh Alam

Related Questions