diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css
index 55d209d14f..b362dc6856 100644
--- a/ghost/admin/app/styles/components/koenig.css
+++ b/ghost/admin/app/styles/components/koenig.css
@@ -1820,7 +1820,7 @@ button.emoji-picker__category-button.active {
     fill: #fff;
 }
 
-.kg-product-card-rating-edit .kg-product-card-rating-star:hover {
+.kg-product-card-rating-star-hovered {
     opacity: 0.7;
 }
 
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.hbs
index 159cd2d4f6..5cdfc29a91 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.hbs
@@ -94,19 +94,19 @@
                     />
                     {{#if @payload.productRatingEnabled}}
                     <div class="kg-product-card-rating-edit icons" style="line-height: auto;">
-                        <button class="{{if (gte @payload.productStarRating 1) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="1" onclick={{action "changeStars"}}>
+                        <button class="{{if (gte @payload.productStarRating 1) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="1" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}}>
                             <span>{{svg-jar "koenig/kg-star"}}</span>
                         </button>
-                        <button class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="2" onclick={{action "changeStars"}}>
+                        <button class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="2" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}}>
                             <span>{{svg-jar "koenig/kg-star"}}</span>
                         </button>
-                        <button class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="3" onclick={{action "changeStars"}}>
+                        <button class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="3" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}}>
                             <span>{{svg-jar "koenig/kg-star"}}</span>
                         </button>
-                        <button class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="4" onclick={{action "changeStars"}}>
+                        <button class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="4" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}}>
                             <span>{{svg-jar "koenig/kg-star"}}</span>
                         </button>
-                        <button class="{{if (gte @payload.productStarRating 5) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="5" onclick={{action "changeStars"}}>
+                        <button class="{{if (gte @payload.productStarRating 5) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="5" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}}>
                             <span>{{svg-jar "koenig/kg-star"}}</span>
                         </button>
                     </div>
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js
index 086ee24987..dd5ed7898e 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js
@@ -302,4 +302,21 @@ export default class KoenigCardProductComponent extends Component {
     toggleProductRating() {
         this._updatePayloadAttr('productRatingEnabled', !this.args.payload.productRatingEnabled);
     }
+
+    @action
+    hoverStarOn(event) {
+        const val = event.currentTarget.value;
+        const stars = this.element.querySelectorAll('.kg-product-card-rating-star');
+        for (let i = 0; i + 1 <= val && i < stars.length; i++) {
+            stars[i].classList.add('kg-product-card-rating-star-hovered');
+        }
+    }
+
+    @action
+    hoverStarOff() {
+        const stars = this.element.querySelectorAll('.kg-product-card-rating-star');
+        for (let i = 0; i < stars.length; i++) {
+            stars[i].classList.remove('kg-product-card-rating-star-hovered');
+        }
+    }
 }