diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
index cf14350a3a..c7a533180f 100644
--- a/packages/nc-gui/components/erd/RelationEdge.vue
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -92,9 +92,11 @@ export default {
 
   <Transition name="layout">
     <EdgeText
-      v-if="data.label?.length > 0 && (selected || isHovering)"
+      v-if="data.label?.length > 0"
       :key="`edge-text-${id}.${showSkeleton}`"
+      class="color-transition"
       :class="[
+        selected || isHovering ? 'opacity-100' : 'opacity-0 !pointer-events-none',
         showSkeleton ? '!text-6xl' : '!text-xs',
         `nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`,
       ]"