diff --git a/draftlogs/8024_fix.md b/draftlogs/8024_fix.md
new file mode 100644
index 00000000000..014524dac08
--- /dev/null
+++ b/draftlogs/8024_fix.md
@@ -0,0 +1 @@
+- Fix modebar hover colors not updating after `color` or `activecolor` changes [[#8024](https://github.com/plotly/plotly.js/pull/8024)]
\ No newline at end of file
diff --git a/src/lib/dom.js b/src/lib/dom.js
index b2fc54aaea0..1beabd1b076 100644
--- a/src/lib/dom.js
+++ b/src/lib/dom.js
@@ -109,22 +109,29 @@ function setStyleOnHover(selector, activeSelector, childSelector, activeStyle, i
         element = document;
     }
     element.querySelectorAll(selector).forEach(function(el) {
+        el._hoverStyle = {
+            activeStyleParts: activeStyleParts,
+            inactiveStyleParts: inactiveStyleParts
+        };
+
         if(!el.getAttribute(eventAddedAttrName)) {
             // Emulate ":hover" CSS style using JS event handlers to set the
             // style in a strict CSP-compliant manner.
             el.addEventListener('mouseenter', function() {
+                var hoverStyle = this._hoverStyle;
                 var childEl = this.querySelector(childSelector);
                 if(childEl) {
-                    childEl.style[activeStyleParts[0]] = activeStyleParts[1];
+                    childEl.style[hoverStyle.activeStyleParts[0]] = hoverStyle.activeStyleParts[1];
                 }
             });
             el.addEventListener('mouseleave', function() {
+                var hoverStyle = this._hoverStyle;
                 var childEl = this.querySelector(childSelector);
                 if(childEl) {
                     if(activeSelector && this.matches(activeSelector)) {
-                        childEl.style[activeStyleParts[0]] = activeStyleParts[1];
+                        childEl.style[hoverStyle.activeStyleParts[0]] = hoverStyle.activeStyleParts[1];
                     } else {
-                        childEl.style[inactiveStyleParts[0]] = inactiveStyleParts[1];
+                        childEl.style[hoverStyle.inactiveStyleParts[0]] = hoverStyle.inactiveStyleParts[1];
                     }
                 }
             });