如何同時觸發模塊、列和行的懸停效果

使用 Divi 構建站點的最好的事情之一是每個構建塊都包含設計選項。 每個模塊、列、行和部分都包含默認和懸停狀態的設計設置。 這為將這些元素組合在一起時觸發多個懸停效果打開了大門。

在本教程中，我將向您展示如何同時觸發模塊、列和行的懸停效果。 訣竅是確保所有元素共享相同的大小和懸停空間。 但是，一旦您準備好元素，您的懸停效果和設計就會變得極具創意。

讓我們開始吧。

搶先看

這是一個快速示例，說明如何同時觸發不同 Divi 元素的懸停效果。

免費下載設計實例

要從本教程中著手設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

訂閱我們的 YouTube 頻道

讓我們進入教程，好嗎？

了解如何同時在多個 Divi 元素上觸發懸停狀態。

Divi 中的每個元素（部分、行或模塊）都有自己的懸停空間，這基本上是元素本身的大小。

這些元素中的每一個都有內置的懸停選項，當懸停在該元素或其包含的任何子元素上時會激活這些選項。

因此，例如，如果您向某個部分添加了懸停選項，則只要您將鼠標懸停在該部分上，這些懸停選項就會變為活動狀態。

然後，如果您將鼠標懸停在該部分內的行懸停空間上，您將同時激活該行和該部分的懸停選項。 這是因為該行是該部分的子元素。

每當您將鼠標懸停在列上時，就會激活列、行和節的懸停狀態。

最後，每當您將鼠標懸停在模塊上時，就會觸發該模塊及其所有父元素（列、行和節）的懸停狀態。

默認情況下，這些元素中的每一個都有間距（填充），在懸停空間中創建間隙，允許用戶有選擇地懸停每個元素。 但是，如果您去掉每個元素之間的間距，您將能夠同時觸發所有元素的懸停狀態。

這為許多懸停效果組合打開了大門，當您組合每個元素的懸停選項並在共享懸停空間激活它們時，這些組合可以同時發生。

組合懸停效果的示例

這是一個如何與 Divi 配合使用的示例。

在下面的示例中，我們有一行帶有背景圖像。 在懸停時，我們有一個延遲的框陰影，它顯示為一種邊框設計元素。

在行內，我們有一列填充了黑框陰影。 懸停時，列的框陰影逐漸減小以顯示行背景圖像。

在列內，我們有一個藍色背景的模糊模塊。 懸停時，藍色背景會更改為半透明的藍色，以便您可以看到背景圖像。

由於每個元素之間都有間距，當我們將鼠標懸停在每個單獨的懸停空間上時，我們可以看到每個元素的特定懸停效果。

但是，如果我們去掉間距並給行一個自定義寬度，所有元素將共享相同的懸停空間。 或者換句話說，模塊佔據了列和行的整個空間。 所以當我們將鼠標懸停在模塊上時，模塊、列和行的懸停效果會同時激活。

過渡延遲非常適合此設置

請記住，在上面的示例中，行和列懸停效果存在過渡延遲，這確實很好地突出了此概念的功能。 如果我們試圖僅向模塊添加類似的懸停效果組合，我們將無法分別對每個懸停效果應用不同的過渡延遲和持續時間。

在 Divi 中重新創建設計示例

為了向您說明這在 Divi 的現實世界中是如何進行的，讓我們重新創建上述示例。

你需要什麼開始

首先，您需要具備以下條件：

1. 已安裝並激活 Divi 主題
2. 在前端從頭開始構建的新頁面（可視化構建器）
3. 用於模擬內容的圖像

之後，您將有一個空白畫布開始在 Divi 中進行設計。

添加節和行

您需要做的第一件事是創建一個具有一列行的常規部分。

更新行和列設置

接下來，打開行設置並為該行設置背景圖像。

然後我們需要去掉默認的padding，這樣行和列之間的懸停空間就沒有間隙了。

• 填充：0px 頂部，0px 底部

然後將以下框陰影添加到懸停時的行中。

• 盒子陰影：見截圖
• 框陰影模糊強度：0px
• 框陰影傳播強度：0px（桌面），10px（懸停）
• 陰影顏色：#063c68

接下來更新具有持續時間和延遲的轉換選項，如下所示：

• 轉換持續時間：500ms
• 轉換延遲：700ms

現在打開列設置並更新以下內容：

• 盒子陰影：見截圖
• 框陰影模糊強度：0px
• 框陰影傳播強度：200px（桌面），0px（懸停）
• 陰影顏色：#000000
• 轉換持續時間：500ms
• 轉換延遲：200ms

添加模糊模塊

現在向該行添加一個模糊模塊。

然後按如下方式更新簡介：

• 圖片：[插入簡介圖片]
• 背景顏色：#0c71c3
• 背景顏色（懸停）：rgba(12,113,195,0.35)

• 文本對齊：居中
• 文字顏色：淺
• 填充：頂部 20 像素，底部 20 像素，左側 20 像素，右側 20 像素

最後結果

查看最終結果。

最後的想法和提示

了解如何同時觸發多個 Divi 元素的懸停狀態開啟了一些令人興奮的設計可能性。 這篇文章中的示例僅突出顯示了在組合模塊、列和行的懸停狀態時可能出現的多種懸停效果組合中的一些。 另外，我們甚至沒有探索組合部分懸停選項所帶來的可能性，這將為您提供更多懸停選項。 當您自己探索這些懸停效果時，這裡有一些提示和想法可以幫助您。

• 使用 Box Shadow 而不是 Borders - Borders 實際上為元素增加了額外的空間，因此這可能會導致不必要的懸停間隙。 Box Shadows 添加了一個不會增加實際空間的設計元素。
• 探索背景過渡懸停效果——每個 Divi 元素都有背景懸停選項，可以組合為創意懸停效果層。
• 使用變換懸停選項 - 變換懸停選項可以添加創意元素，例如懸停時縮放和旋轉元素。 但是，在懸停時旋轉多個元素可能具有挑戰性，因為它會導致跳躍。
• 利用過渡選項——在每個元素的懸停狀態上添加不同的過渡持續時間和延遲可以創建獨特的懸停動畫。

我希望本教程能激發您探索 Divi 中一些驚人的懸停效果組合。

我期待在評論中收到您的來信。

乾杯!