diff --git a/components/_partials/components-list.css b/components/_partials/components-list.css
index 51a3f177..fa9d2b30 100644
--- a/components/_partials/components-list.css
+++ b/components/_partials/components-list.css
@@ -47,8 +47,7 @@
   transition: box-shadow 180ms ease, transform 180ms ease;
 }
 
-.component-list-card:hover,
-.component-list-card:focus-visible {
+.component-list-column:is(:hover, :has(:focus-visible)) .component-list-card {
   box-shadow: 0 3px 7px rgba(29, 31, 33, 0.12),
     0 7px 18px rgba(29, 31, 33, 0.16);
   transform: translateY(-2px);
@@ -135,17 +134,12 @@ a .component-link-icon:after {
   transition: all 0.3s !important;
 }
 
-a:hover .component-link-icon:after,
-a.component-list-header-text:hover
-  ~ div.component-list-icon
-  p
-  a
-  i.component-link-icon:after {
+.component-list-column:is(:hover, :has(:focus-visible)) .component-link-icon:after {
   content: "\F133";
   font-family: "bootstrap-icons";
 }
 
-.component-list-header-text:hover {
+.component-list-column:is(:hover, :has(:focus-visible)) .component-list-header-text {
   color: #000000;
 }
 
@@ -154,9 +148,8 @@ a.component-list-header-text:hover
     transition: none;
   }
 
-  .component-list-card:hover,
-  .component-list-card:focus-visible {
-    transform: none;
+  .component-list-column .component-list-card {
+    transform: none !important;
   }
 }
 
diff --git a/components/_partials/components-list.js b/components/_partials/components-list.js
index 3aa1cd6c..57775091 100644
--- a/components/_partials/components-list.js
+++ b/components/_partials/components-list.js
@@ -95,16 +95,20 @@ document.querySelectorAll(".component-list-card").forEach((card) => {
     }
   };
 
-  card.addEventListener("pointerenter", (event) => {
+  // The whole column (title, arrow, and card) triggers the preview.
+  const column = card.closest(".component-list-column") ?? card;
+  column.addEventListener("pointerenter", (event) => {
     if (event.pointerType !== "touch") showAnimation();
   });
-  card.addEventListener("pointerleave", showPoster);
+  column.addEventListener("pointerleave", showPoster);
   // Keyboard focus only: Android Chrome also focuses a tapped link, which
   // would start downloading the GIF just as the page navigates away.
-  card.addEventListener("focus", () => {
-    if (card.matches(":focus-visible")) showAnimation();
+  column.addEventListener("focusin", (event) => {
+    if (event.target.matches(":focus-visible")) showAnimation();
+  });
+  column.addEventListener("focusout", (event) => {
+    if (!column.contains(event.relatedTarget)) showPoster();
   });
-  card.addEventListener("blur", showPoster);
   image.addEventListener("load", () => {
     if (blobUrl && image.src === blobUrl) card.classList.add("is-playing");
   });