How to modify CSS to display menu on hover?

Hello, I would like the main menu to display in English by default, but switch to Chinese when hovering with the mouse. I have written the following CSS, but both English and Chinese appear when hovering. Where did I go wrong? I have tried many ways but still failed~~~

Appreciate your help.

選單懸停時變中文

/* 共用的樣式，滑鼠懸停時隱藏英文 */
.custom-menu-item a:hover {
    color: transparent; /* 將文字顏色設置為透明 */
}

/* 首頁選單項 */
.custom-menu-item-home a:hover:after {
    content: "首頁"; /* 中文內容 */
}

/* About選單項 */
.custom-menu-item-about a:hover:after {
    content: "關於"; /* 中文內容 */
}

/* Architect選單項 */
.custom-menu-item-architect a:hover:after {
    content: "建築大師"; /* 中文內容 */
}

/* Living選單項 */
.custom-menu-item-living a:hover:after {
    content: "便利樂居"; /* 中文內容 */
}

/* Materials選單項 */
.custom-menu-item-exquisite a:hover:after {
    content: "精品生活"; /* 中文內容 */
}

/* Contact選單項 */
.custom-menu-item-contact a:hover:after {
    content: "預約賞屋"; /* 中文內容 */
}

The page I need help with: [log in to see the link]