Make hover effect on dropdown admonitions more prominent

src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

@@ -370,4 +370,10 @@ html {
       }
     }
   }
+
+  .sd-summary-title:hover {
+    // Use text underlining to make the hover effect more perceivable and
+    // therefore more accessible.
+    text-decoration: underline;
+  }
 }

src/pydata_sphinx_theme/assets/styles/extensions/_togglebutton.scss

@@ -1,5 +1,7 @@
 /**
  * Sphinx togglebutton
+ *
+ * https://sphinx-togglebutton.readthedocs.io/en/latest/index.html
  */
 
 .bd-content {
@@ -17,8 +19,32 @@
     }
   }
 
-  // Admonition toggles
-  .admonition {
+  // Apply this mixin to the element that will be hovered. These styles are
+  // intended to match what sphinx-design does for its dropdown admonitions.
+  @mixin icon-hover-effects {
+    &:hover .tb-icon {
+      opacity: 1;
+      scale: 1.1;
+    }
+
+    .tb-icon {
+      opacity: 0.6;
+    }
+  }
+
+  // Collapsible admonition, implemented as <div> + <button>
+  .dropdown.admonition.toggle {
+    .admonition-title {
+      @include icon-hover-effects;
+
+      &:hover,
+      &:hover button.toggle-button {
+        // Use text underlining to make the hover effect more perceivable and
+        // therefore more accessible.
+        text-decoration: underline;
+      }
+    }
+
     button.toggle-button {
       color: inherit;
 
@@ -50,7 +76,7 @@
       // the left border on the container's children). This makes it complicated
       // to get the focus ring to simultaneously cover the left border in the
       // header and align perfectly on the right with the body.
-      .admonition-title:focus-within::before {
+      .admonition-title:focus-within:has(:focus-visible)::before {
         content: "";
         transform: translateX(
           -$admonition-left-border-width
@@ -70,13 +96,20 @@
     }
   }
 
-  // Details buttons
+  // Collapsible anything, implemented as <details> + <summary>
   details.toggle-details {
     // Over-ride border color to re-use our primary color
     summary {
       border-left: 3px solid var(--pst-color-primary);
 
       @include chevron-down;
+      @include icon-hover-effects;
+
+      &:hover {
+        // Use text underlining to make the hover effect more perceivable and
+        // therefore more accessible.
+        text-decoration: underline;
+      }
     }
 
     // When expanded, sharpen the bottom left and right corners of the focus ring