diff --git a/web/styles/reactions.css b/web/styles/reactions.css
index 14195a01fd..6567058537 100644
--- a/web/styles/reactions.css
+++ b/web/styles/reactions.css
@@ -43,33 +43,6 @@
             transform: scale(var(--scale-message-reaction-active));
         }
 
-        + .reaction_button {
-            visibility: hidden;
-            pointer-events: none;
-            /* Set top/bottom padding to accommodate borders
-               and padding around reaction pills. */
-            padding: 4.5px 6px;
-            height: 13px;
-            border-radius: 21px;
-            color: var(--color-message-reaction-button-text);
-            background-color: var(--color-message-reaction-button-background);
-            border: 1px solid var(--color-message-reaction-button-border);
-            /* TODO: Eventually this space will be set on the message
-               box, at least in part, but for now this preserves the
-               space beneath the reactions area. */
-            margin-bottom: 4px;
-
-            &:hover {
-                color: var(--color-message-reaction-button-text-hover);
-                background-color: var(
-                    --color-message-reaction-button-background-hover
-                );
-                border-color: var(--color-message-reaction-button-border-hover);
-                box-shadow: inset 0 0 5px 0
-                    var(--color-message-reaction-shadow-inner);
-            }
-        }
-
         .emoji {
             margin: 1px 3px;
             height: 17px;
@@ -119,7 +92,7 @@
         color: var(--color-message-reaction-button-text);
     }
 
-    &:hover .message_reaction + .reaction_button {
+    &:hover .reaction_button {
         visibility: visible;
         pointer-events: all;
     }
@@ -131,6 +104,21 @@
     }
 
     .reaction_button {
+        visibility: hidden;
+        pointer-events: none;
+        /* Set top/bottom padding to accommodate borders
+           and padding around reaction pills. */
+        padding: 4.5px 6px;
+        height: 13px;
+        border-radius: 21px;
+        color: var(--color-message-reaction-button-text);
+        background-color: var(--color-message-reaction-button-background);
+        border: 1px solid var(--color-message-reaction-button-border);
+        /* TODO: Eventually this space will be set on the message
+           box, at least in part, but for now this preserves the
+           space beneath the reactions area. */
+        margin-bottom: 4px;
+
         & i {
             font-size: 1em;
         }
@@ -149,13 +137,16 @@
         }
 
         &:hover {
-            border: 1px solid var(--color-message-reaction-button-border-hover);
+            color: var(--color-message-reaction-button-text-hover);
             background-color: var(
                 --color-message-reaction-button-background-hover
             );
+            border: 1px solid var(--color-message-reaction-button-border-hover);
+            border-color: var(--color-message-reaction-button-border-hover);
+            box-shadow: inset 0 0 5px 0
+                var(--color-message-reaction-shadow-inner);
             cursor: pointer;
             opacity: 1;
-            color: var(--color-message-reaction-button-text-hover);
         }
 
         .message_reaction_count {