diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
index 091a25a..2c6d86c 100644
--- a/src/layout/components/ToolHeader.vue
+++ b/src/layout/components/ToolHeader.vue
@@ -48,25 +48,25 @@ export default defineComponent({
         {layout.value !== 'top' ? (
           <div class="h-full flex items-center">
             {hamburger.value && layout.value !== 'cutMenu' ? (
-              <Collapse class="hover-tigger" color="var(--top-header-text-color)"></Collapse>
+              <Collapse class="hover-trigger" color="var(--top-header-text-color)"></Collapse>
             ) : undefined}
             {breadcrumb.value ? <Breadcrumb class="<md:hidden"></Breadcrumb> : undefined}
           </div>
         ) : undefined}
         <div class="h-full flex items-center">
           {screenfull.value ? (
-            <Screenfull class="hover-tigger" color="var(--top-header-text-color)"></Screenfull>
+            <Screenfull class="hover-trigger" color="var(--top-header-text-color)"></Screenfull>
           ) : undefined}
           {size.value ? (
-            <SizeDropdown class="hover-tigger" color="var(--top-header-text-color)"></SizeDropdown>
+            <SizeDropdown class="hover-trigger" color="var(--top-header-text-color)"></SizeDropdown>
           ) : undefined}
           {locale.value ? (
             <LocaleDropdown
-              class="hover-tigger"
+              class="hover-trigger"
               color="var(--top-header-text-color)"
             ></LocaleDropdown>
           ) : undefined}
-          <UserInfo class="hover-tigger"></UserInfo>
+          <UserInfo class="hover-trigger"></UserInfo>
         </div>
       </div>
     )
diff --git a/src/layout/components/useRenderLayout.tsx b/src/layout/components/useRenderLayout.tsx
index 40134a6..d388d5f 100644
--- a/src/layout/components/useRenderLayout.tsx
+++ b/src/layout/components/useRenderLayout.tsx
@@ -110,7 +110,7 @@ export const useRenderLayout = () => {
     return (
       <>
         <div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
-          {logo.value ? <Logo class="hover-tigger !pr-15px"></Logo> : undefined}
+          {logo.value ? <Logo class="hover-trigger !pr-15px"></Logo> : undefined}
 
           <ToolHeader class="flex-1"></ToolHeader>
         </div>
@@ -167,7 +167,7 @@ export const useRenderLayout = () => {
     return (
       <>
         <div class="flex items-center justify-between bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
-          {logo.value ? <Logo class="hover-tigger"></Logo> : undefined}
+          {logo.value ? <Logo class="hover-trigger"></Logo> : undefined}
           <Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
           <ToolHeader></ToolHeader>
         </div>
@@ -204,7 +204,7 @@ export const useRenderLayout = () => {
     return (
       <>
         <div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
-          {logo.value ? <Logo class="hover-tigger !pr-15px"></Logo> : undefined}
+          {logo.value ? <Logo class="hover-trigger !pr-15px"></Logo> : undefined}
 
           <ToolHeader class="flex-1"></ToolHeader>
         </div>
diff --git a/windi.config.ts b/windi.config.ts
index de72177..4ef7b06 100644
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -53,7 +53,7 @@ export default defineConfig({
         }
       })
       addComponents({
-        '.hover-tigger': {
+        '.hover-trigger': {
           display: 'flex',
           height: '100%',
           padding: '1px 10px 0',
@@ -64,7 +64,7 @@ export default defineConfig({
             backgroundColor: 'var(--top-header-hover-color)'
           }
         },
-        '.dark .hover-tigger': {
+        '.dark .hover-trigger': {
           '&:hover': {
             backgroundColor: 'var(--el-bg-color-overlay)'
           }