如何在 Divi 中懸停或單擊時更改多個元素的樣式

已發表: 2020-09-04

最終，在網頁設計領域，編碼人員和非編碼人員都希望為他們的 Divi 網站添加更高級的定制和功能。通常，這涉及使用 Javascript/JQuery 出於不同原因更改頁面上元素的樣式。您可能希望在單擊按鈕時顯示聯繫表單。或者，您可能希望將鼠標懸停在鏈接上時更改圖像。

在本教程中，我們將向您展示如何在 Divi 中懸停或單擊時更改多個元素的樣式。首先，我們將利用 Divi 的內置設計選項來設計部分佈局。然後我們將介紹一個簡單的 jQuery 片段，您可以將它與自定義 CSS 結合使用，以在懸停或單擊按鈕時調整該部分中任何元素的樣式。這聽起來可能很複雜（尤其是對於初學者而言），但您可能會驚訝於它的實現如此簡單。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

這是將鼠標懸停在按鈕上時更改的部分佈局設計。

在divi中單擊或懸停時更改多個元素的樣式

這是通過單擊按鈕更改的相同部分佈局設計。請注意，按鈕文本也會在單擊時發生變化。

在divi中單擊或懸停時更改多個元素的樣式

免費下載佈局

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

下載文件

免費下載

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

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

分區通知框

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

擴展角標籤

首先，您需要執行以下操作：

如果您還沒有安裝並激活 Divi 主題。
在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
選擇“從頭開始構建”選項。

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

第 1 部分：設計剖面佈局

首先，創建一個新的兩列行。

在divi中單擊或懸停時更改多個元素的樣式

部分設置

在添加任何模塊之前，打開該部分的設置，並更新以下內容：

背景顏色：#ffffff

在divi中單擊或懸停時更改多個元素的樣式

頂部分隔線樣式：見截圖
頂部分隔線顏色：#ffffff
頂部分隔高度：5vw

底部分隔線樣式：相同
底部分隔線顏色：#ffffff
底部分隔線高度：5vw

填充：6vw 頂部，6vw 底部

在divi中單擊或懸停時更改多個元素的樣式

前圖像

在兩列行的左列中，添加一個新的圖像模塊。

在divi中單擊或懸停時更改多個元素的樣式

然後上傳您要展示的圖片。在本教程中，我們使用了學習管理 (LMS) 佈局包中的圖像，該圖像大約為 800 像素 x 550 像素。

在divi中單擊或懸停時更改多個元素的樣式

在設計選項卡下，更新對齊方式並啟用強制全角選項。

圖像對齊：居中
強制全角：是

在divi中單擊或懸停時更改多個元素的樣式

後圖像

接下來，我們將創建另一個圖像，當我們懸停/單擊按鈕時將顯示該圖像。

要創建圖像，請複制之前的圖像模塊。

在divi中單擊或懸停時更改多個元素的樣式

然後上傳一張新圖片。該圖像應與其他圖像的大小相同，因為它將在懸停/單擊時替換其他圖像。

在divi中單擊或懸停時更改多個元素的樣式

對於這個圖像，我們將給它一個絕對位置。這將導致圖像直接位於其他圖像上方，而不會佔用頁面上的實際空間。

位置：絕對

在divi中單擊或懸停時更改多個元素的樣式

在設計選項卡下，更改過濾器選項下的不透明度，使圖像完全不可見。

不透明度：0%

在divi中單擊或懸停時更改多個元素的樣式

添加文本標題

在右欄中，添加一個新的文本模塊。

在divi中單擊或懸停時更改多個元素的樣式

然後將以下 HTML 粘貼到正文內容區域：

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

在divi中單擊或懸停時更改多個元素的樣式

請注意，文本中的某些單詞用 span 標籤包裹。這樣我們就可以稍後使用一些自定義 CSS 來定位和設置這些單詞的樣式。

在設計選項卡下，更新 H3 樣式選項如下：

標題 3 字體：蒙特塞拉特
標題 3 字體粗細：超粗體
標題 3 字體樣式：TT
標題 3 文字大小：65px（桌面和平板電腦），40px（手機）
標題 3 字母間距：0.8em
標題 3 行高：1.3em

在divi中單擊或懸停時更改多個元素的樣式

這負責保存我們將在懸停/單擊按鈕時更改的設計元素的部分佈局。在下一節中，我們將添加用於啟動樣式更改的按鈕。

為按鈕創建部分

在當前部分下方創建一個新的常規部分。

在divi中單擊或懸停時更改多個元素的樣式

然後向該部分添加一列行。

在divi中單擊或懸停時更改多個元素的樣式

添加按鈕

在列中，添加一個新的按鈕模塊。

在divi中單擊或懸停時更改多個元素的樣式

將按鈕文本更改為“見後”。

在divi中單擊或懸停時更改多個元素的樣式

跳轉到設計選項卡並更新按鈕的設計如下：

為按鈕使用自定義樣式：是
按鈕文字大小：16px
按鈕文字顏色：#ffffff
按鈕背景：#4b4baf
按鈕背景（懸停）：#67ddc1
按鈕邊框寬度：0px
按鈕字母間距：4px
按鈕字體：蒙特塞拉特
按鈕字體粗細：半粗體
按鈕字體樣式：TT

在divi中單擊或懸停時更改多個元素的樣式

第 2 部分：向元素添加 CSS 類

現在我們的設計已經就位，我們將使用自定義代碼（CSS 和 JQuery）完成其餘的設計更改。但是在我們開始添加自定義代碼之前，我們需要將 CSS 類添加到我們希望在懸停/單擊按鈕時更改的所有元素。

將 CSS 類添加到部分

要將 CSS 類添加到該部分，請打開部分設置，然後單擊高級選項卡。然後輸入以下 CSS 類：

CSS 類：et-change-style_section

在divi中單擊或懸停時更改多個元素的樣式

將 CSS 類添加到圖像

接下來，打開左列中第一張圖像的設置並添加以下 CSS 類：

CSS 類：et-before-image

這將是在按鈕懸停/單擊“之前”顯示的圖像。

在divi中單擊或懸停時更改多個元素的樣式

使用圖層模式，打開第二張圖像（被不透明度過濾器隱藏的圖像）的設置並添加以下 CSS 類：

CSS 類：et-after-image

這將是在按鈕懸停/單擊“之後”顯示的圖像。

在divi中單擊或懸停時更改多個元素的樣式

將 CSS 類添加到文本

接下來，將以下 CSS 類添加到右列中的文本模塊：

CSS 類：et-style-text

在divi中單擊或懸停時更改多個元素的樣式

將 CSS 類添加到按鈕

最後，在底部的按鈕中添加一個自定義 CSS 類，如下所示：

CSS 類：et-toggle-button

我們需要這個類在稍後的代碼中定位按鈕以實現懸停/單擊功能。

在divi中單擊或懸停時更改多個元素的樣式

第 3 部分：添加自定義代碼以在懸停或單擊時更改樣式

現在我們所有的 CSS 類都已就位，我們現在可以添加在懸停/單擊按鈕時更改所有這些元素的樣式所需的代碼。

添加代碼模塊

要添加代碼，請在底部的按鈕下添加代碼模塊。

在divi中單擊或懸停時更改多個元素的樣式

粘貼 jQuery 代碼

然後粘貼以下 JQuery。確保將代碼包裝在腳本標籤中，因為我們將代碼添加到 HTML 文檔（而不是 JS 文件）中。

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

在divi中單擊或懸停時更改多個元素的樣式

如果您查看代碼，您應該會認出我們添加到按鈕和部分的 CSS 類。

按鈕類（“.et-toggle-button”）用於定位將在懸停時啟動功能的元素。

在懸停時，該函數將找到具有節類“.et-change-style_section”的元素，並在光標懸停在按鈕上時切換/添加一個新類（“.et-change-style-active”）。

該按鈕也被定位（通過“$this”），以便在懸停狀態下切換一個新類（“.et-toggle-button_active”）。

在divi中單擊或懸停時更改多個元素的樣式

在懸停時更改這些元素樣式的關鍵是將這些額外的新 CSS 類添加/切換到部分和按鈕。

例如，一旦具有類“.et-change-style_section”的部分被賦予了額外的類（“.et-change-style_active”），我們就可以使用自定義 CSS 來更改最初賦予它的部分的樣式內置的 Divi 選項。

使用自定義 CSS 更改元素的樣式

打開代碼模塊並將以下自定義 CSS 粘貼到 JQuery 腳本上方，確保將其包裝在必要的 Style 標記中。

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

請注意，初始部分類與作為選擇器的新類組合在一起。後面的 CSS 僅適用於附加新類時的部分。未附加時，將顯示原始設計。在這個例子中，當鼠標懸停在按鈕上時，該部分的背景顏色會發生變化。

在divi中單擊或懸停時更改多個元素的樣式

接下來，將以下附加 CSS 粘貼到樣式標籤中。

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }

因為父部分在懸停時被賦予一個類，所以您可以使用相同的 CSS 類來定位該部分的子元素（如圖像）。但是因為它是父容器/部分中的一個類，所以 CSS 類應該在您要更改的元素的類之前。在這個例子中，給定父部分的 CSS 類（“.et-change-style_active”）在給定子圖像（“.et-after-image”和“.et-before-image”）的類之前。

在divi中單擊或懸停時更改多個元素的樣式

後圖像的 CSS 將在按鈕懸停時顯示圖像。之前圖像的 CSS 將隱藏按鈕懸停時的圖像。結果是初始圖像在按鈕懸停時更改為新圖像。

接下來將其餘的 CSS 粘貼到樣式標籤中：

  .et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
    color: #ffffff;
  }
  .et-change-style_active .et-style-text h3 span {
    color: #67ddc1;
  }
  .et-toggle-button_active {
    transform: scale(1.1);
    background-color: #67ddc1 !important;
  }  
  .et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
    transition: all 0.3s;
  }

當部分（或按鈕）具有新類時，這些 CSS 片段使用相同的概念來更改元素的樣式。

在divi中單擊或懸停時更改多個元素的樣式

最終結果（懸停）

添加代碼後，保存更改，然後打開頁面查看結果。注意當鼠標懸停在按鈕上時，我們定位的元素是如何改變的。

在divi中單擊或懸停時更改多個元素的樣式

單擊而不是懸停時更改樣式

如果您想在單擊按鈕（而不是懸停）時更改這些相同元素的樣式，您需要做的就是對 JQuery 進行一些更改。大多數代碼將保持不變。主要區別在於“懸停”方法被“單擊”代替。我們添加了一個有用的代碼片段，可以在單擊時更改按鈕的文本。

要添加單擊功能，請將當前的 JQuery 替換為以下內容（再次確保它包含在腳本標記中）：

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

在divi中單擊或懸停時更改多個元素的樣式

這是最終結果。

在divi中單擊或懸停時更改多個元素的樣式

最後的想法

當懸停或點擊某物時，能夠定位和更改頁面上多個元素的樣式是網頁設計中的一項有用技能。您可以將此技術用於各種用例（前後、CTA 等……）當然，了解一點 CSS 和 JS/JQuery 會有所幫助。但是，正如您在本教程中看到的，您無需了解代碼語氣即可獲得一些令人驚訝的結果！

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

乾杯!

如何在 Divi 中懸停或單擊時更改多個元素的樣式

搶先看

免費下載佈局

免費下載

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

你需要什麼開始

第 1 部分：設計剖面佈局

部分設置

前圖像

後圖像

添加文本標題

為按鈕創建部分

添加按鈕

第 2 部分：向元素添加 CSS 類

將 CSS 類添加到部分

將 CSS 類添加到圖像

將 CSS 類添加到文本

將 CSS 類添加到按鈕

第 3 部分：添加自定義代碼以在懸停或單擊時更改樣式

添加代碼模塊

粘貼 jQuery 代碼

使用自定義 CSS 更改元素的樣式

最終結果（懸停）

單擊而不是懸停時更改樣式

最後的想法

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