styles:部分icon在hover的时候，需要有背景色

km-console/packages/config-manager-fe/src/components/TypicalListCard/index.less

@@ -32,6 +32,13 @@
         color: #74788d;
         cursor: pointer;
       }
+      .refresh-icon{
+        padding: 0 6px;
+        border-radius: 50%;
+        &:hover {
+          background: rgba(33, 37, 41, 0.04);
+        }
+      }
       .right .search-input {
         width: 248px;
         margin-right: 8px;

km-console/packages/layout-clusters-fe/src/components/CardBar/BrokerHealthCheck.tsx

@@ -7,7 +7,7 @@ import { Tag, Tooltip, Utils } from 'knowdesign';
 import api from '@src/api';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { HealthStateEnum } from '../HealthState';
-
+import './index.less';
 export default () => {
   const routeParams = useParams<{
     clusterId: string;
@@ -87,7 +87,7 @@ export default () => {
               <div>
                 <span style={{ display: 'inline-block', marginRight: '8px' }}>Similar Config</span>
                 <Tooltip overlayClassName="rebalance-tooltip" title="所有Broker配置是否一致">
-                  <QuestionCircleOutlined />
+                  <span className='rebalance-tooltip-bg'><QuestionCircleOutlined /></span>
                 </Tooltip>
               </div>
             );

km-console/packages/layout-clusters-fe/src/components/CardBar/index.less

@@ -177,3 +177,13 @@
     border-radius: 6px;
   }
 }
+.rebalance-tooltip-bg {
+  padding: 6px;
+  margin-left: -6px;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 50%;
+  &:hover {
+    background: rgba(33, 37, 41, 0.04);
+  }
+}

km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/style/index.less

@@ -37,8 +37,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 22px;
+        padding: 6px;
-        height: 22px;
         border-radius: 50%;
         cursor: pointer;
         .icon {
@@ -46,7 +45,7 @@
           color: #74788d;
         }
         &:hover {
-          background: #21252904;
+          background: rgba(33, 37, 41, 0.04);
           .refresh-icon {
             color: #495057;
           }

km-console/packages/layout-clusters-fe/src/index.less

@@ -308,10 +308,17 @@ li {
     align-items: center;
   }
   &-left  {
-    &-refresh{
+    &-refresh {
-      font-size: 20px;
+        font-size: 20px;
-      color: #74788d;
+        color: #74788d;
-      cursor: pointer;
+        cursor: pointer;
+        padding: 0px 6px;
+        color: #74788d;
+        cursor: pointer;
+        border-radius: 50%;
+        &:hover {
+          background: rgba(33, 37, 41, 0.04);
+        }
     }
   }
   

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.less

@@ -35,14 +35,19 @@
         }
         .edit-icon-box {
           position: relative;
-          width: 20px;
+          width: 24px;
           cursor: pointer;
           .edit-icon {
-            position: absolute;
+              position: absolute;
-            bottom: 2px;
+              bottom: -2px;
-            margin-left: 4px;
+              padding: 3px;
-            font-size: 16px;
+              margin-left: 4px;
-            color: #74788d;
+              font-size: 16px;
+              color: #74788d;
+              border-radius: 50%;
+            &:hover {
+              background: rgba(33, 37, 41, 0.04);
+            }
           }
         }
       }
@@ -205,9 +210,15 @@
           margin-bottom: 10px;
 
           .icon {
+            padding: 3px 3px 2px 3px;
             margin-left: 4px;
             font-size: 14px;
             cursor: pointer;
+            border-radius: 50%;
+            line-height: 12px;
+            &:hover {
+              background: rgba(33, 37, 41, 0.04);
+              }
           }
         }