簡介
在電腦版時有效果，hover(滑鼠移上去)選單時想要讓中文的選單自動轉成英文的效果。
運用範圍
沒有什麼常見的運作情境，如果說有，那就是做給外國人看的，只是選單有英文，內容沒有英文的話，這樣外國人不就只能看得懂選單而已嗎？XD
範例
這裡我拉一個Elementor的選單當作範例效果，如下:
原理與思路
我使用jQuery的hover效果來處理這樣的需求，並且須事先準備要用的「英文字詞」，因這個並不是自動翻譯，故要在後台/外觀/選單:要先準備好對應的英文字詞，然後利用jQuery去處理滑鼠事件來做中英文的替換。
注意
此法不只對「第一層」主選單有效，對第二層、第三層....的子選單也都有效果!
實作
付費內容，需支付 : 500 個學習幣
您須先登入會員以使用學習幣與發問功能。總結
有時候業主就是要這個功能，只是我覺得沒有很實用啦!
這只有在電腦版時有效果，因手機瀏覽器本就沒有hover(滑鼠移上去)的效果，使用上要特別注意。
我使用jQuery的hover效果來處理這樣的需求，當然純CSS也有hover功能，只是純CSS不好寫，用jQuery比較簡單一點。
18 則留言
您好 謝謝您的教學，已經使用成功了
有另一個問題想詢問，請問要如何調整 hover的轉換方式呢？
目前是滑鼠靠近直接變成英文，但我想要它是使用往上翻轉的特效變成英文
請問要如何調整程式碼呢？
補充，剛剛發現主選單雖然已經成功顯示了，但子選單的文字都變得跟主選單一樣
比如：”關於我們”之下有Ａ、Ｂ、Ｃ三個子選單，但現在這三個子選單的中文都變成”關於我們”，請問該如何調整呢?🙏
你好，
我測試一下，見圖 https://prnt.sc/G9fa4-GULTCQ ，它不會造子項目造成影響喔，如文章一開始所說，只對主項目有影響，你的說會影響子項目，可以提供網址幫你看一下。
您好 我用兩個網站去測試，有發生兩個不同的狀況，如以下連結內容
https://pickle-venom-f13.notion.site/QA-304ee4cd17434102921f0b97f18466b0?pvs=4
你好，本文教的方式，我在上個月幫客戶編寫時有再加改寫另一個方式，目前已更新寫入文章中 ，您可照我的新方式再試一下。
您好 請問程式碼改完會是這樣嗎? 連結中有附上使用的網址，但沒有達到我需要的效果，想再請您幫我看一下 謝謝！
https://pickle-venom-f13.notion.site/QA-6e454992e6a448fca6bd763d23ba61c7?pvs=4
不對，程式碼一句也不用改，直接貼上，你要改的是「外觀/選單/每一選項」之名稱，請再閱讀一下文章。
您好 以下是我的操作截圖，我看跟您的操作都是一樣的，不知道是不是我漏了甚麼
https://pickle-venom-f13.notion.site/QA-3-25c8e40fe0174124bf99adbe3cf79e1b?pvs=4
您好，您方便的話，點網站上方的「會議室」，密碼1111，我在裡面，我遠端看一下您的畫面。
我知你原因了，你雙引號有問題，見圖 https://prnt.sc/ipC74N1igQrI
原來！我雙引號部分有問題，我已經修正了，大部分都正常，只有一個選單還是有問題無法正常顯示
我檢查了一下與其他選單的設定並無不同，是否是哪邊有衝突到呢？
附圖如以下：
https://pickle-venom-f13.notion.site/QA-4-e038397c86d74f8688272613eca8a494?pvs=4
那個「Case」，仍是雙引號有問題唷! → class=”menu-ch” → 右邊的引號有問題
有了！我直接複製正確的去改字，另外可以詢問顯示動畫的問題嗎?
想要參考的範例：https://pickle-venom-f13.notion.site/QA-5-7ef2b6e5b50344e6a16b289bc1c4786d?pvs=4
本篇教學不包含「特效」唷，有需求另外包討論與報價，多謝!
好的 請問我該如何跟您接洽這個部分呢?
可來信 [email protected] ，或加Line@ : @smallway (@也要搜)，我這幾日稍忙可能無法立即在洽談後動工，但可先聊一下需求。
想請問我想要欄位可以固定寬度，這是需要額外討論與報價的嗎?
目前會根據英文的寬度不同，有不同的寬度，想要讓它固定
您好，我可以簡單跟你說一下用css如何幫每個選項固定寬度，但這個作法實施後或許會衍生出其它一串要微調的地方，此時我就無法再一一詳解了唷，仍需詳解真的就要外包了。剩下的討論，煩請來信 : [email protected]
★補充 : 個別改變單一選項的寬度如圖 : https://prnt.sc/g9M4W97LZx-D