diff --git a/src/extensionsIntegrated/CSSColorPreview/main.js b/src/extensionsIntegrated/CSSColorPreview/main.js
index 8345df40d8..fc37027e60 100644
--- a/src/extensionsIntegrated/CSSColorPreview/main.js
+++ b/src/extensionsIntegrated/CSSColorPreview/main.js
@@ -146,39 +146,24 @@ define(function (require, exports, module) {
 
     /**
      * To move the cursor to the color text and display the color quick edit
-     * @param {CodeMirror} codeMirror the codemirror instance
+     * @param {Editor} editor the codemirror instance
      * @param {Number} lineNumber the line number that is clicked
-     * @param {String} gutter the gutter name
+     * @param {string} colorValue the color value clicked
      */
-    function colorIconClicked(codeMirror, lineNumber, gutter) {
-        const editor = EditorManager.getActiveEditor();
-
-        if(gutter === GUTTER_NAME) {
-
-            let colorValue;
-
-            for(let i of codeMirror.colorGutters) {
-                if(i.lineNumber === lineNumber) {
-                    colorValue = i.colorValues[0];
-                }
-            }
-
-            const lineText = editor.getLine(lineNumber);
-            const colorIndex = lineText.indexOf(colorValue);
-
-            if (colorIndex !== -1) {
-                // Place cursor at the start of the color text
-                if (editor) {
-                    editor.setCursorPos(lineNumber, colorIndex);
-
-                    // Added a 50ms delay with setTimeout to make sure the quick edit menu toggles correctly.
-                    // Without it, closing the menu trigger text selection, reopening the menu.
-                    setTimeout(() => {
-                        CommandManager.execute(Commands.TOGGLE_QUICK_EDIT);
-                    }, 50);
-                }
-            }
+    function _colorIconClicked(editor, lineNumber, colorValue) {
+        const lineText = editor.getLine(lineNumber);
+        const colorIndex = lineText.indexOf(colorValue);
+        const currentPos = editor.getCursorPos(false, "start");
+        if(!(currentPos.line === lineNumber && currentPos.ch === colorIndex)) {
+            editor.setCursorPos(lineNumber, colorIndex);
+            editor.focus();
         }
+
+        // Added a 50ms delay with setTimeout to make sure the quick edit menu toggles correctly.
+        // Without it, closing the menu trigger text selection, reopening the menu.
+        setTimeout(() => {
+            CommandManager.execute(Commands.TOGGLE_QUICK_EDIT);
+        }, 50);
     }
 
     /**
@@ -194,17 +179,12 @@ define(function (require, exports, module) {
             editor.clearGutter(GUTTER_NAME); // clear color markers
             _addDummyGutterMarkerIfNotExist(editor, editor.getCursorPos().line);
 
-            cm.on("gutterClick", (codeMirror, lineNumber, gutter) => {
-                colorIconClicked(codeMirror, lineNumber, gutter);
-            });
-
             // Only add markers if enabled
             if (enabled) {
                 cm.colorGutters = _.sortBy(_results, "lineNumber");
 
                 cm.colorGutters.forEach(function (obj) {
                     let $marker;
-
                     if (obj.colorValues.length === 1) {
                         // Single color preview
                         $marker = $("<i>")
@@ -212,6 +192,11 @@ define(function (require, exports, module) {
                             .css('background-color', obj.colorValues[0]);
 
                         editor.setGutterMarker(obj.lineNumber, GUTTER_NAME, $marker[0]);
+                        $marker.click((event)=>{
+                            event.preventDefault();
+                            event.stopPropagation();
+                            _colorIconClicked(editor, obj.lineNumber, obj.colorValues[0]);
+                        });
                     } else {
                         // Multiple colors preview
                         $marker = $("<div>").addClass("ico-multiple-cssColorPreview");
@@ -232,6 +217,11 @@ define(function (require, exports, module) {
                                         'background-color': color,
                                         ...positions[index]
                                     });
+                                $colorBox.click((event)=>{
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    _colorIconClicked(editor, obj.lineNumber, color);
+                                });
                                 $marker.append($colorBox);
                             }
                         });
diff --git a/src/styles/Extn-CSSColorPreview.less b/src/styles/Extn-CSSColorPreview.less
index f0f4fe414b..2ee34b494e 100644
--- a/src/styles/Extn-CSSColorPreview.less
+++ b/src/styles/Extn-CSSColorPreview.less
@@ -18,6 +18,7 @@
     height:.7em;
     width: .7em;
     position: relative;
+    pointer-events: auto;
 }
 
 /* Multiple colors preview container (this is a div) */
@@ -31,6 +32,16 @@
     top: .2em;
     width: .9em;
     height:.9em;
+    pointer-events: auto;
+    transition: all 0.3s ease;
+}
+
+.ico-multiple-cssColorPreview:hover {
+    top: -.8em;
+    width: 2em;
+    height:2em;
+    pointer-events: auto;
+    transition: all 0.3s ease;
 }
 
 /* For individual color boxes, they will be added inside the main .ico-multiple-cssColorPreview div */
@@ -39,4 +50,13 @@
     width: .4em;
     height: .4em;
     box-sizing: border-box;
+    transition: all 0.3s ease;
 }
+
+.ico-multiple-cssColorPreview:hover .color-box {
+    position: absolute;
+    width: calc(1em - 1px);
+    height: calc(1em - 1px);
+    box-sizing: border-box;
+    transition: all 0.3s ease;
+}
\ No newline at end of file