Add an outline to hovered full click cards

CHANGELOG.md

@@ -9,12 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Add the option for a darker `<hr>` element with `tna-hr-dark`
+- Added the option for a darker `<hr>` element with `tna-hr-dark`
 - Tables needing horizontal scrolling can be focused on and recieve a "(scroll to see more)" note added to their caption
 
 ### Changed
 
-- Added an outline to focused cards with the full click option enabled
+- Added outlines to hovered and focused cards with the full click option enabled
 - `touched`, `tabbed` and `clicked` template modifiers added as part of `initAll()`
 - Print modifiers moved into `initAll()`
 

src/nationalarchives/components/card/card.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "../../variables/a11y" as a11yVariables;
 @use "../../variables/borders";
 @use "../../tools/a11y";
 @use "../../tools/colour";
@@ -80,6 +81,20 @@
     order: 2;
   }
 
+  &--full-click {
+    border-radius: 0.1px;
+
+    &:hover {
+      @include colour.colour-outline("keyline", 1px, solid);
+      outline-offset: a11yVariables.$focus-outline-width - 1px;
+    }
+
+    &:focus,
+    &:active {
+      outline: none;
+    }
+  }
+
   &--full-click &__heading-link {
     &::before {
       content: "";