Adding hover and active styles with pseudo-elements.

hover_and_active_style.scss

    &:hover {
      position: relative;

      &:before {
        content: " ";
        height: 24px;
        width: 24px;
        left: 0;
        top: 0;
        position: absolute;
        background: $header_background_colour;
        opacity: 0.3;
      }
    }

    &:active {
      position: relative;

      &:before {
        content: " ";
        height: 24px;
        width: 24px;
        left: 0;
        top: 0;
        position: absolute;
        background: black;
        opacity: 0.3;
      }
    }