如何在 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 布局包！