diff --git a/scss/_tables.scss b/scss/_tables.scss
index d5b3cddf213cf03422eab625875aa670c3b3e4cd..f40f29a5e2f29925e5d59c1a4daa2f3d78a551af 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -86,14 +86,27 @@
 //
 // Placed here since it has to come after the potential zebra striping
 
+// stylelint-disable selector-max-type
 .table-hover {
   tbody tr {
     &:hover {
       color: $table-hover-color;
-      background-color: $table-hover-bg;
+
+      > th,
+      > td {
+        background-color: $table-hover-bg;
+
+        // Set background hover color for each table color variant
+        @each $color, $value in $theme-colors {
+          &.table-#{$color} {
+            background-color: darken(color-level($value, $table-bg-level), 5%);
+          }
+        }
+      }
     }
   }
 }
+// stylelint-enable selector-max-type
 
 
 // Table backgrounds
diff --git a/scss/mixins/_table-row.scss b/scss/mixins/_table-row.scss
index 517229e1a7297e951e5070bc716ec5c875d3888a..a299459cc24a570d55a2582628fbcdc3502a3a3b 100644
--- a/scss/mixins/_table-row.scss
+++ b/scss/mixins/_table-row.scss
@@ -19,21 +19,4 @@
       }
     }
   }
-
-  // Hover states for `.table-hover`
-  // Note: this is not available for cells or rows within `thead` or `tfoot`.
-  .table-hover {
-    $hover-background: darken($background, 5%);
-
-    .table-#{$state} {
-      &:hover {
-        background-color: $hover-background;
-
-        > td,
-        > th {
-          background-color: $hover-background;
-        }
-      }
-    }
-  }
 }