08/09/2023

如何在WordPress中設置滑鼠懸停淡出效果的圖片（簡單且容易）

上次更新：2024年5月3日 | 編輯團隊撰寫 | 審閱：Syed Balkhi

您是否想在WordPress中設置滑鼠懸停淡出效果的圖片？

當用戶將滑鼠懸停在圖片上時，簡單的淡入或淡出動畫可以讓您的網站更具吸引力。如果您想讓訪客與您的內容互動時間更長，這會是一個好主意。

本文將向您展示如何在WordPress中添加滑鼠懸停淡出效果的圖片。

為什麼在WordPress中設置滑鼠懸停淡出效果的圖片？

動畫是一種簡單有效的方式，可以讓您的網站更有趣，甚至吸引訪客注意頁面上最重要的內容，如網站標誌或行動號召。

儘管有許多方法可以在WordPress中使用CSS動畫，但對圖片添加懸停效果特別有效。淡出動畫意味著當訪客將滑鼠懸停在圖片上時，圖片將慢慢變得透明或重新出現。

這鼓勵人們與您的圖片互動，甚至可以為頁面添加敘事元素。例如，不同的圖片可能會在訪客移動網頁時淡入淡出。

與其他一些動畫不同，滑鼠懸停淡出效果較為柔和，因此不會對訪客的閱讀體驗或您的圖片優化產生負面影響。讓我們來看看如何在WordPress中添加滑鼠懸停淡出效果的圖片。您可以使用以下快速鏈接直接跳至您想要使用的方法：

方法1：為所有WordPress圖片添加滑鼠懸停淡出效果

最簡單的方法是使用WPCode插件，這個免費插件允許您輕鬆添加自定義代碼到WordPress，而無需編輯主題文件。

首先，安裝並激活免費的WPCode插件。詳細步驟請參閱我們的逐步指南：如何安裝WordPress插件。

激活後，前往「Code Snippets」>「Add Snippet」。在這裡，您會看到所有可添加到網站的已有WPCode代碼片段。只需將滑鼠懸停在「Add Your Custom Code」上，然後點擊「Use Snippet」。

接下來，輸入自定義代碼片段的標題，這可以幫助您在WordPress儀錶板中辨認片段。要添加自定義CSS到WordPress，打開「Code Type」下拉菜單並選擇「CSS Snippet」。在代碼編輯器中添加以下代碼片段：

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

這段代碼片段會在用戶將滑鼠懸停在圖片上時，讓每張圖片淡出2秒。要讓圖片淡出更慢，只需將「2s ease」替換為更高的數字。相反，要更快只需使用「1s ease」或更小的數字。還可以通過更改「opacity:0.6」這一行來調整透明度。

當您對片段感到滿意時，滾動到「Insertion」部分。WPCode可以將您的代碼添加到不同的位置，例如每個帖子後面，僅前端或僅管理員。要為所有圖片添加淡出效果，點擊「Auto Insert」並打開「Location」下拉菜單並選擇「Site Wide Header」。

然後，您可以將「Inactive」切換為「Active」狀態，最後點擊「Save Snippet」使CSS片段生效。

現在，如果您將滑鼠懸停在WordPress網站上的任何圖片上，您將看到淡出效果。

方法2：為單個頁面添加圖片淡出動畫

如果網站上的圖片很多，如攝影網站或圖片庫店鋪，為每張圖片添加淡出效果可能會造成干擾。在這種情況下，您可以選擇在特定頁面或文章上使用淡出效果。

好消息是WPCode允許您創建自定義短代碼，您可以將這個短代碼放在任意頁面上。首先，按照上述相同的過程創建自定義代碼片段並添加淡出動畫代碼，然後點擊「Save Snippet」按鈕。

接下來，滾動到「Insertion」部分，這次選擇「Shortcode」。這將創建一個短代碼，您可以將其添加到任何頁面、文章或小工具區域。

接下來，使代碼片段生效，然後導航到您想要使用短代碼的頁面、文章或小工具區域，創建一個新的「Shortcode」區塊，將WPCode短代碼粘貼到該區塊內。

點擊「Update」或「Publish」使短代碼生效。訪問該頁面或文章即可看到淡出效果。

方法3：為特色圖片添加淡出動畫

另一個選項是為文章縮略圖或特色圖片添加淡出效果。這些圖片通常顯示在首頁、歸檔頁等重要位置。通過為特色圖片添加滑鼠懸停淡出效果，可以讓網站更有吸引力，而不必為每張圖片都添加動畫。

要為文章縮略圖添加淡出動畫，按照上述相同的過程創建自定義代碼片段，但這次在代碼編輯器中添加以下代碼：

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

然後，滾動到「Insertion」框並選擇“Auto Insert”，打開「Location」下拉菜單並選擇「Site Wide Header」。

接下來使代碼片段生效。現在，當您將滑鼠懸停在任何特色圖片上時，可以看到淡出動畫效果。

如果想要添加更多圖片滑鼠懸停效果，可以參閱我們的指南：在WordPress中添加圖片懸停效果。