搜尋
Close this search box.

如何做出滑鼠移至選單時會自動切換中英文呢?(子選項也適用)

索引
全文

簡介

在電腦版時有效果,hover(滑鼠移上去)選單時想要讓中文的選單自動轉成英文的效果。

運用範圍

沒有什麼常見的運作情境,如果說有,那就是做給外國人看的,只是選單有英文,內容沒有英文的話,這樣外國人不就只能看得懂選單而已嗎?XD

範例

這裡我拉一個Elementor的選單當作範例效果,如下:

原理與思路

我使用jQuery的hover效果來處理這樣的需求,並且須事先準備要用的「英文字詞」,因這個並不是自動翻譯,故要在後台/外觀/選單:要先準備好對應的英文字詞,然後利用jQuery去處理滑鼠事件來做中英文的替換。

 

實作

付費內容,需支付 : 500 個學習幣
您須先登入會員以使用學習幣與發問功能。

總結

有時候業主就是要這個功能,只是我覺得沒有很實用啦!

這只有在電腦版時有效果,因手機瀏覽器本就沒有hover(滑鼠移上去)的效果,使用上要特別注意。

我使用jQuery的hover效果來處理這樣的需求,當然純CSS也有hover功能,只是純CSS不好寫,用jQuery比較簡單一點。

有問題嗎?歡迎於下方發問

18 則留言

  1. 您好 謝謝您的教學,已經使用成功了
    有另一個問題想詢問,請問要如何調整 hover的轉換方式呢?

    目前是滑鼠靠近直接變成英文,但我想要它是使用往上翻轉的特效變成英文
    請問要如何調整程式碼呢?

  2. 有了!我直接複製正確的去改字,另外可以詢問顯示動畫的問題嗎?
    想要參考的範例:https://pickle-venom-f13.notion.site/QA-5-7ef2b6e5b50344e6a16b289bc1c4786d?pvs=4

          • 想請問我想要欄位可以固定寬度,這是需要額外討論與報價的嗎?
            目前會根據英文的寬度不同,有不同的寬度,想要讓它固定

          • 您好,我可以簡單跟你說一下用css如何幫每個選項固定寬度,但這個作法實施後或許會衍生出其它一串要微調的地方,此時我就無法再一一詳解了唷,仍需詳解真的就要外包了。剩下的討論,煩請來信 : [email protected]
            ★補充 : 個別改變單一選項的寬度如圖 : https://prnt.sc/g9M4W97LZx-D

發佈回覆給「A19980817」的留言取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

下一首

每日登入可以累積學習幣!

Line的不良影響

我個人並不很喜歡用Line,因當我一句訊息回覆後,馬上對方又一句回來,如此往返下去則半小時、一小時就過去了,我無法專心工作,除非是正式諮詢或安排會議的討論,才適合這種模式

有時候對方的問題很多很雜,一傳就是十幾封訊息,這就是訊息轟詐了,我就不知從何回起,我就會只回最後一封的訊息。

有時候對方的問題很多還加上數張截圖,因Line無法條列式呈現,我也無法增加腦力去判斷哪張圖要對應哪則訊息,所以我就會只回最後一封的訊息。

另我不喜歡私人Line被直接來電,因我常常在國道開車需要導航,有時因加班在補眠,這些都會不良干擾。

不是正式會議的討論階段,請您用Email,Email可以條列方式呈現多則問題與截圖,也可以讓我先已讀後再慢慢思考怎樣回覆,避免我自己不小心已讀不回造成對方不佳的感受。🙏 - Wiktionary, the free dictionary

哈囉,在加Line好友之前請先確認一下幾點 :

1、若您是上課的學員或讀者,請直接用Email發問或在該篇文章留言發問,盡量不要直接加Line發問,因我平常很忙,無法守在Line前與您一句一句訊息對答,若每一期 + 每個學員都加Line課後詢問,我短時間內回不完這麼多訊息也會回得很慢喔 ,請見諒。(用Email發問,我會仔細條列說明,你會得到更完整的圖文回覆,甚至還會附上小影片解說。)
Email : [email protected]

2、若是網站外包詢價相關,您再加Line,因我可能需要與您語音會議或遠端連線。

3、補充說明 : Line的不良影響

以上。

目前線上有 3 個使用者: 0 個成員1 個訪客2 個檢索機器人

線上同時最多使用者人數為 121 個使用者,發生於 2024-05-1419:40

1 個訪客 正在線上

#1 – 訪客 於 2024-12-2214:32
架站勤拿手 » 如何做出滑鼠移至選單時會自動切換中英文呢?(子選項也適用) - 架站勤拿手 [網址]

2 個檢索機器人 正在線上

#1 – Google 於 2024-12-2214:32
架站勤拿手 » 當文字後面出現「obj」時的處理方法 - 架站勤拿手 [網址]

#2 – Bing 於 2024-12-2214:28
架站勤拿手 » [外掛]一鍵全站備份搬家與還原-All in One WP Migration - 架站勤拿手 [網址]