CSS Panel - Added element highlight on selector field hover

1 files changed, 17 insertions, 3 deletions

diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
index cfa3e605..7a6a3957 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -85,7 +85,20 @@ exports.CssStyleRule = Montage.create(Component, {
             }
         }
     },
-
+    handleMouseover: {
+        value: function(e) {
+            if(this.focusDelegate) {
+                this.focusDelegate.handleSelectorHover(this.selectorField.value, 'over');
+            }
+        }
+    },
+    handleMouseout: {
+        value: function(e) {
+            if(this.focusDelegate) {
+                this.focusDelegate.handleSelectorHover(this.selectorField.value, 'out');
+            }
+        }
+    },
     update: {
         value: function() {
             if(this.cssText !== this.rule.cssText) {
@@ -107,11 +120,12 @@ exports.CssStyleRule = Montage.create(Component, {
                 this.declarationComponent.type = 'inline';
             } else {
                 this.selectorField.addEventListener('change', this, false);
+                this.selectorField.element.addEventListener('mouseover', this, false);
+                this.selectorField.element.addEventListener('mouseout', this, false);
             }
-            //console.log("css style rule : prepare for draw");
-
         }
     },
+
     willDraw : {
         value: function() {
             if(this.applied) {