diff --git a/packages/common/Button/src/main.vue b/packages/common/Button/src/main.vue
index 91f24cce2..adb66a5d4 100644
--- a/packages/common/Button/src/main.vue
+++ b/packages/common/Button/src/main.vue
@@ -32,7 +32,7 @@
         <n-spin
           v-if="loading"
           :class="{
-            'simulate-transparent-stroke': simulateTransparent
+            'simulate-hollow-out-stroke': simulateHollowOut
           }"
           :size="null"
           :stroke-width="4"
@@ -40,7 +40,7 @@
         <n-icon
           v-else-if="icon"
           :class="{
-            'simulate-transparent-text': simulateTransparent
+            'simulate-hollow-out-text': simulateHollowOut
           }"
           :type="icon"
         />
@@ -58,7 +58,7 @@
       v-if="!circle && $slots.default"
       class="n-button__content"
       :class="{
-        'simulate-transparent-text': simulateTransparent
+        'simulate-hollow-out-text': simulateHollowOut
       }"
       :style="style"
     >
@@ -83,7 +83,7 @@
         <n-spin
           v-if="loading"
           :class="{
-            'simulate-transparent-stroke': simulateTransparent
+            'simulate-hollow-out-stroke': simulateHollowOut
           }"
           :stroke-width="4"
         />
@@ -91,7 +91,7 @@
           v-else-if="icon"
           :type="icon"
           :class="{
-            'simulate-transparent-text': simulateTransparent
+            'simulate-hollow-out-text': simulateHollowOut
           }"
         />
         <div
@@ -193,7 +193,7 @@ export default {
     avoidHollowOut () {
       return this.ghost || !['primary', 'link', 'info', 'success', 'warning', 'error'].includes(this.type)
     },
-    simulateTransparent () {
+    simulateHollowOut () {
       if (this.ghost) return false
       if (['primary', 'link', 'info', 'success', 'warning', 'error'].includes(this.type)) return true
       else return false
diff --git a/packages/common/Radio/src/RadioButton.vue b/packages/common/Radio/src/RadioButton.vue
index 1cca04c30..8086e9642 100644
--- a/packages/common/Radio/src/RadioButton.vue
+++ b/packages/common/Radio/src/RadioButton.vue
@@ -12,7 +12,7 @@
     <div
       class="n-radio-button__label"
       :class="{
-        'simulate-transparent-text': checked
+        'simulate-hollow-out-text': checked
       }"
     >
       <slot />
diff --git a/packages/common/Slider/src/main.vue b/packages/common/Slider/src/main.vue
index c26a8223a..25e13676d 100644
--- a/packages/common/Slider/src/main.vue
+++ b/packages/common/Slider/src/main.vue
@@ -22,14 +22,14 @@
         <div
           v-for="mark in computedMarks"
           :key="mark.label"
-          class="n-slider-dot simulate-transparent-background"
+          class="n-slider-dot simulate-hollow-out-background"
           :style="mark.style"
         />
       </div>
     </div>
     <div
       ref="firstHandle"
-      class="n-slider-handle simulate-transparent-background"
+      class="n-slider-handle simulate-hollow-out-background"
       tabindex="0"
       :style="firstHandleStyle"
       @mousedown="handleFirstHandleMouseDown"
@@ -39,7 +39,7 @@
     <div
       v-if="range"
       ref="secondHandle"
-      class="n-slider-handle simulate-transparent-background"
+      class="n-slider-handle simulate-hollow-out-background"
       tabindex="0"
       :style="secondHandleStyle"
       @mousedown="handleSecondHandleMouseDown"
diff --git a/packages/common/Steps/src/Step.vue b/packages/common/Steps/src/Step.vue
index 63d3dff6c..a0726f94a 100644
--- a/packages/common/Steps/src/Step.vue
+++ b/packages/common/Steps/src/Step.vue
@@ -29,7 +29,7 @@
           v-if="!finished || (finished && finishStatus === 'process')"
           class="n-step-indicator__index"
           :class="{
-            'simulate-transparent-text': active
+            'simulate-hollow-out-text': active
           }"
         >
           {{ index }}
diff --git a/packages/mixins/hollowoutable.js b/packages/mixins/hollowoutable.js
index b17d659d9..5c0c5c5ec 100644
--- a/packages/mixins/hollowoutable.js
+++ b/packages/mixins/hollowoutable.js
@@ -43,7 +43,7 @@ export default {
   },
   mounted () {
     this.hollowOutBackgroundColorId = 'x' + Math.random().toString(16).slice(9)
-    this.$el.setAttribute('n-background-id', this.hollowOutBackgroundColorId)
+    this.$el.setAttribute('n-hollowoutable-id', this.hollowOutBackgroundColorId)
     if (this.avoidHollowOut) return
     this.updateHollowOutStyle()
   },
diff --git a/packages/utils/HollowOutStyleManager.js b/packages/utils/HollowOutStyleManager.js
index fe90e1a65..580a2747e 100644
--- a/packages/utils/HollowOutStyleManager.js
+++ b/packages/utils/HollowOutStyleManager.js
@@ -6,13 +6,13 @@ class HollowOutStyleManager {
   }
   styleForComponent (id, backgroundColor) {
     if (!backgroundColor) return ''
-    return `[n-background-id=${id}] .simulate-transparent-text {
+    return `[n-hollowoutable-id=${id}] .simulate-hollow-out-text {
   color: ${backgroundColor}!important;
 }
-[n-background-id=${id}] .simulate-transparent-background {
+[n-hollowoutable-id=${id}] .simulate-hollow-out-background {
   background-color: ${backgroundColor}!important;
 }
-[n-background-id=${id}] .simulate-transparent-stroke circle {
+[n-hollowoutable-id=${id}] .simulate-hollow-out-stroke circle {
   stroke: ${backgroundColor}!important;
 }
 `