diff --git a/frontend_tests/node_tests/ui_init.js b/frontend_tests/node_tests/ui_init.js
index 809b0d0d24..0c3826062a 100644
--- a/frontend_tests/node_tests/ui_init.js
+++ b/frontend_tests/node_tests/ui_init.js
@@ -194,7 +194,7 @@ $tab_bar.find = () => false;
 compose.compute_show_video_chat_button = () => {};
 $("#below-compose-content .video_link").toggle = () => {};
 
-$(".narrow_description > a").hover = () => {};
+$("#tab_bar .narrow_description > a").hover = () => {};
 
 run_test('initialize_everything', () => {
     ui_init.initialize_everything();
diff --git a/static/js/tab_bar.js b/static/js/tab_bar.js
index 3665e1b583..777705ecea 100644
--- a/static/js/tab_bar.js
+++ b/static/js/tab_bar.js
@@ -90,19 +90,12 @@ function bind_title_area_handlers() {
         }
     });
 
-    const color = $(".search_closed").css("color");
-    const night_mode_color = $(".nightmode .closed_icon").css("color");
-
-    // make sure that hover plays nicely with whether search is being
-    // opened or not.
-    $(".narrow_description > a").hover(() => {
-        if (night_mode_color) {
-            $(".search_closed").css("color", night_mode_color);
-        } else {
-            $(".search_closed").css("color", color);
-        }
+    // handler that makes sure that hover plays nicely
+    // with whether search is being opened or not.
+    $("#tab_bar .narrow_description > a").hover(() => {
+        $("#tab_bar .search_closed").addClass("search_icon_hover_highlight");
     }, () => {
-        $(".search_closed").css("color", "");
+        $("#tab_bar .search_closed").removeClass("search_icon_hover_highlight");
     });
 }
 
diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss
index 05999edf55..fbc65b6631 100644
--- a/static/styles/night_mode.scss
+++ b/static/styles/night_mode.scss
@@ -343,6 +343,7 @@ on a dark background, and don't change the dark labels dark either. */
     #message_edit_tooltip:hover,
     .clear_search_button:hover,
     #tab_bar .search_icon:hover,
+    .search_icon_hover_highlight,
     #searchbox_legacy .search_icon:hover,
     #searchbox_legacy .search_button:hover,
     #searchbox .search_icon:hover,
diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss
index ab0280dc53..615e6c20d8 100644
--- a/static/styles/zulip.scss
+++ b/static/styles/zulip.scss
@@ -1734,6 +1734,7 @@ div.focused_table {
         left: 0px;
     }
 
+    .search_icon_hover_highlight,
     .search_icon:hover {
         color: hsl(0, 0%, 0%);
         text-decoration: none;