diff --git a/frontend/src/metabase/css/core/hover.css b/frontend/src/metabase/css/core/hover.css
index 1103a80be90da515d500b4eddc85497c31585e87..9585ee408c522b5edd884bd65782442987e140b6 100644
--- a/frontend/src/metabase/css/core/hover.css
+++ b/frontend/src/metabase/css/core/hover.css
@@ -24,6 +24,7 @@
   visibility: visible;
 }
 
-.hover-parent:hover.hover--inherit > * {
+.hover-parent:hover.hover--inherit > *,
+.hover-parent:hover.hover--inherit .hover-child {
   color: inherit !important;
 }
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
index 416a9d3bc7ff06a34d3641a166a85bd48b977918..01a644b3bf0d2793c29dadd239033576b27b4caf 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
@@ -386,7 +386,7 @@ export default class ExpressionEditorTextfield extends React.Component {
                     }}
                     style={{ paddingTop: 5, paddingBottom: 5 }}
                     className={cx(
-                      "px2 cursor-pointer text-white-hover bg-brand-hover",
+                      "px2 cursor-pointer text-white-hover bg-brand-hover hover-parent hover--inherit",
                       {
                         "text-white bg-brand":
                           i === this.state.highlightedSuggestion,
@@ -398,7 +398,7 @@ export default class ExpressionEditorTextfield extends React.Component {
                       <span>
                         {suggestion.name.slice(0, suggestion.range[0])}
                         <span
-                          className={cx("text-brand text-bold", {
+                          className={cx("text-brand text-bold hover-child", {
                             "text-white bg-brand":
                               i === this.state.highlightedSuggestion,
                           })}