Merge pull request #7338 from plotly/hover-bug

Fix hover bug

Author: marthacryan

src/components/modebar/modebar.js

@@ -60,9 +60,6 @@ proto.update = function(graphInfo, buttons) {
     document.querySelectorAll(groupSelector).forEach(function(group) {
         group.style.backgroundColor = style.bgcolor;
     });
-    // set styles on hover using event listeners instead of inline CSS that's not allowed by strict CSP's
-    Lib.setStyleOnHover('#' + modeBarId + ' .modebar-btn', '.active', '.icon path', 'fill: ' + style.activecolor, 'fill: ' + style.color);
-
     // if buttons or logo have changed, redraw modebar interior
     var needsNewButtons = !this.hasButtons(buttons);
     var needsNewLogo = (this.hasLogo !== context.displaylogo);
@@ -92,6 +89,10 @@ proto.update = function(graphInfo, buttons) {
     }
 
     this.updateActiveButton();
+
+    // set styles on hover using event listeners instead of inline CSS that's not allowed by strict CSP's
+    Lib.setStyleOnHover('#' + modeBarId + ' .modebar-btn', '.active', '.icon path', 'fill: ' + style.activecolor, 'fill: ' + style.color, this.element);
+
 };
 
 proto.updateButtons = function(buttons) {

src/lib/dom.js

@@ -101,12 +101,14 @@ function deleteRelatedStyleRule(uid) {
  * @param {string} activeStyle    style that has to be applied when 'hovered' or 'active'
  * @param {string} inactiveStyle    style that has to be applied when not 'hovered' nor 'active'
  */
-function setStyleOnHover(selector, activeSelector, childSelector, activeStyle, inactiveStyle) {
+function setStyleOnHover(selector, activeSelector, childSelector, activeStyle, inactiveStyle, element) {
     var activeStyleParts = activeStyle.split(':');
     var inactiveStyleParts = inactiveStyle.split(':');
     var eventAddedAttrName = 'data-btn-style-event-added';
-
-    document.querySelectorAll(selector).forEach(function(el) {
+    if (!element) {
+        element = document;
+    }
+    element.querySelectorAll(selector).forEach(function(el) {
         if(!el.getAttribute(eventAddedAttrName)) {
             // Emulate ":hover" CSS style using JS event handlers to set the
             // style in a strict CSP-compliant manner.