diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index f1b0bfecb98278..cc9a6cfe857e5d 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -43,8 +43,8 @@ const ItemOperation: FC<IItemOperationProps> = ({
           </div>
           {isShowDelete && (
             <div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-gray-50 group')} onClick={onDelete} >
-              <TrashIcon className={'shrink-0 w-4 h-4 stroke-current text-gray-500 stroke-2 group-hover:text-red-500'} />
-              <span className={cn(s.actionName, 'group-hover:text-red-500')}>{t('explore.sidebar.action.delete')}</span>
+              <TrashIcon className={cn(s.deleteActionItemChild, 'shrink-0 w-4 h-4 stroke-current text-gray-500 stroke-2')} />
+              <span className={cn(s.actionName, s.deleteActionItemChild)}>{t('explore.sidebar.action.delete')}</span>
             </div>
           )}
 
diff --git a/web/app/components/explore/item-operation/style.module.css b/web/app/components/explore/item-operation/style.module.css
index b3618c9e1dc197..1bc7d91ca48f22 100644
--- a/web/app/components/explore/item-operation/style.module.css
+++ b/web/app/components/explore/item-operation/style.module.css
@@ -28,4 +28,8 @@ body .btn {
 body .btn:hover {
   /* background-image: ; */
   background-color: #F2F4F7;
+}
+
+.deleteActionItem:hover .deleteActionItemChild {
+  @apply text-red-500; 
 }
\ No newline at end of file