diff --git a/src/navigator/config/config.js b/src/navigator/config/config.js
index f35c603cf..5ae226811 100644
--- a/src/navigator/config/config.js
+++ b/src/navigator/config/config.js
@@ -15,5 +15,8 @@ module.exports = {
   hideTextnode: 1,
 
   // Indicates if the wrapper is visible in layers
-  showWrapper: 1
+  showWrapper: 1,
+
+  // Show hovered components in canvas
+  showHover: 1
 };
diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js
index ab9a9225b..af4bf5523 100644
--- a/src/navigator/view/ItemView.js
+++ b/src/navigator/view/ItemView.js
@@ -8,6 +8,7 @@ module.exports = require('backbone').View.extend({
     'mousedown [data-toggle-move]': 'startSort',
     'click [data-toggle-visible]': 'toggleVisibility',
     'click [data-toggle-select]': 'handleSelect',
+    'mouseover [data-toggle-select]': 'handleHover',
     'click [data-toggle-open]': 'toggleOpening',
     'dblclick [data-name]': 'handleEdit',
     'focusout [data-name]': 'handleEditEnd'
@@ -198,6 +199,15 @@ module.exports = require('backbone').View.extend({
     this.em && this.em.setSelected(this.model, { fromLayers: 1 });
   },
 
+  /**
+   * Handle component selection
+   */
+  handleHover(e) {
+    e.stopPropagation();
+    const { em, config, model } = this;
+    em && config.showHover && em.setHovered(model, { fromLayers: 1 });
+  },
+
   /**
    * Delegate to sorter
    * @param	Event