How to Change the Style of Multiple Elements on Hover or Click in Divi

How to Change the Style of Multiple Elements on Hover or Click in Divi

Eventually, in the world of web design, coders and non-coders alike will look to add more advanced customizations and functionality to their Divi websites. Usually, this involves using Javascript/JQuery to change the style of elements on the page for different reasons. You may want to make a contact form appear when clicking a button. Or you may want to change an image when hovering over a link.

In this tutorial, we are going to show you how to change the style of multiple elements on hover or click in Divi. First, we’ll take advantage of Divi’s built-in design options to design a section layout. Then we’ll introduce a simple snippet of jQuery that you can use in combination with custom CSS to adjust the style of any element in that section when hovering or clicking a button. This may sound complicated (especially for beginners) but you may be surprised at just how simple it is to accomplish.

Let’s get started!

Sneak Peek

Here is a quick look at the design we’ll build in this tutorial.

Here is the section layout design being changed when hovering over the button.

change style of multiple elements on click or hover in divi

And here is the same section layout design being changed with clicking the button. Notice the button text also changes on click.

change style of multiple elements on click or hover in divi

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the section layout to your Divi Library, navigate to the Divi Library.

Click the Import button.

In the portability popup, select the import tab and choose the download file from your computer.

Then click the import button.

divi notification box

Once done, the section layout will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

expanding corner tabs

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.

After that, you will have a blank canvas to start designing in Divi.

Part 1: Designing the Section Layout

To get started, create a new two-column row.

change style of multiple elements on click or hover in divi

Section Settings

Before adding any modules, open the settings for the section, and update the following:

  • Background Color: #ffffff

change style of multiple elements on click or hover in divi

  • Top Divider Style: see screenshot
  • Top Divider Color: #ffffff
  • Top Divider Height: 5vw
  • Bottom Divider Style: same
  • Bottom Divider Color: #ffffff
  • Bottom Divider Height: 5vw
  • Padding: 6vw top, 6vw bottom

change style of multiple elements on click or hover in divi

Before Image

In the left column of the two-column row, add a new image module.

change style of multiple elements on click or hover in divi

Then upload the image you want to showcase. For this tutorial, we are using an image from the Learning Management (LMS) Layout Pack which is roughly 800px by 550px.

change style of multiple elements on click or hover in divi

Under the design tab, update the alignment and enable the force fullwidth option.

  • Image Alignment: center
  • Force Fullwidth: YES

change style of multiple elements on click or hover in divi

After Image

Next, we are going to create another image that we will show when we hover/click on a button.

To create the image, duplicate the previous image module.

change style of multiple elements on click or hover in divi

Then upload a new image. The image should be the same size as the other image since it will be replacing the other image on hover/click.

change style of multiple elements on click or hover in divi

For this image, we are going to give it an absolute position. This will cause the image to sit directly above the other image without taking up actual space on the page.

  • Position: Absolute

change style of multiple elements on click or hover in divi

Under the Design tab, change the opacity under the filter options so that the image is completely invisible.

  • Opacity: 0%

change style of multiple elements on click or hover in divi

Add Text Heading

In the right column, add a new text module.

change style of multiple elements on click or hover in divi

Then paste the following HTML into the body content area:

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

change style of multiple elements on click or hover in divi

Notice that some of the words in the text are wrapped with span tags. This is so we can target and style those words later on with some custom CSS.

Under the design tab, update H3 style options as follows:

  • Heading 3 Font: Montserrat
  • Heading 3 Font Weight: Ultra Bold
  • Heading 3 Font Style: TT
  • Heading 3 Text Size: 65px (desktop and tablet), 40px (phone)
  • Heading 3 Letter Spacing: 0.8em
  • Heading 3 Line Height: 1.3em

change style of multiple elements on click or hover in divi

That takes care of the section layout that holds the design elements we will change when hovering/clicking a button. In this next section, we are going to add the button we will use to initiate the style changes.

Create Section for Button

Create a new regular section below the current section.

change style of multiple elements on click or hover in divi

Then add a one-column row to the section.

change style of multiple elements on click or hover in divi

Add Button

In the column, add a new button module.

change style of multiple elements on click or hover in divi

Change the button text to read “See After”.

change style of multiple elements on click or hover in divi

Jump over to the design tab and update the design of the button as follows:

  • Use Custom Styles for Button: YES
  • Button Text Size: 16px
  • Button Text Color: #ffffff
  • Button Background: #4b4baf
  • Button Background (hover): #67ddc1
  • Button Border Width: 0px
  • Button Letter Spacing: 4px
  • Button Font: Montserrat
  • Button Font Weight: Semi Bold
  • Button Font Style: TT

change style of multiple elements on click or hover in divi

change style of multiple elements on click or hover in divi

Part 2: Adding CSS Classes to the Elements

Now that our design is in place, we are going to accomplish the rest of the design changes using custom Code (CSS and JQuery). But before we start adding our custom code, we need to add CSS Classes to all the elements we wish to change when hovering/clicking the button.

Add CSS Class to Section

To add a CSS Class to the section, open the section settings, and click the advanced tab. Then enter the following CSS Class:

  • CSS Class: et-change-style_section

change style of multiple elements on click or hover in divi

Add CSS Class to Images

Next, open the settings for the first image in the left column and add the following CSS Class:

  • CSS Class: et-before-image

This will be the image that is shown “before” the button hover/click.

change style of multiple elements on click or hover in divi

Using the layers modal, open the settings for the second image (the one being hidden with the opacity filter) and add the following CSS Class:

  • CSS Class: et-after-image

This will be the image that is shown “after” the button hover/click.

change style of multiple elements on click or hover in divi

Add CSS Class to Text

Next, add the following CSS Class to the Text Module in the right column:

  • CSS Class: et-style-text

change style of multiple elements on click or hover in divi

Add CSS Class to Button

Lastly, add a custom CSS Class the button in the bottom section as follows:

  • CSS Class: et-toggle-button

We need this class to target the button for hover/click functionality in the code later on.

change style of multiple elements on click or hover in divi

Part 3: Add Custom Code to Change Styles on Hover or Click

Now that all of our CSS Classes are in place, we can now add the code necessary to change the style of all those elements when hovering/clicking the button.

Add Code Module

To add the code, add a code module under the button in the bottom section.

change style of multiple elements on click or hover in divi

Paste jQuery Code

Then paste the following JQuery. Making sure to wrap the code in script tags because we are adding the code to an HTML document (not a JS file).

(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 );

change style of multiple elements on click or hover in divi

If you take a look at the code, you should recognize the CSS Classes we added to the button and the section.

The Button Class (“.et-toggle-button”) is being used to target the element that will initiate a function on hover.

On hover, the function will find the element with the section class “.et-change-style_section” and toggle/add a new class (“.et-change-style-active”) when the cursor is hovering over the button.

The button is also being targeted (via “$this”) in order to toggle a new class (“.et-toggle-button_active”) in the hover state.

change style of multiple elements on click or hover in divi

The key to changing the styles of these elements on hover is adding/toggling these additional new CSS Classes to the section and button.

For example, once the section with the class “.et-change-style_section” is given that additional class (“.et-change-style_active”), we can use Custom CSS to change the style of the section originally given to it via the built-in Divi options.

Changing the Style of Elements with Custom CSS

Open the code module and paste the following Custom CSS above the JQuery Script, making sure to wrap it in the necessary Style tags.

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

Notice that the initial section class is combined with the new class as the selector. The CSS that follows will only apply to the section when that new class is attached. When it isn’t attached, the original design will be displayed. In this example, the background color of the section will change when hovering over the button.

change style of multiple elements on click or hover in divi

Next, paste in the following additional CSS inside the style tags.

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

Because the parent section is given a class on hover, you can target the child elements of the section (like the images) using that same CSS class. But because it is a class in a parent container/section, the CSS Class should precede the class of the element you are seeking to change. In this example, the CSS Class (“.et-change-style_active”) given to the parent section comes before the class given the child images (“.et-after-image” and “.et-before-image”).

change style of multiple elements on click or hover in divi

The CSS for the after image will show the image on button hover. And the CSS for the before image will hide the image on button hover. The result is that the initial image is changed to a new one on button hover.

Next paste in the rest of the CSS inside the style tags:

 .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; }

These CSS snippets are using the same concept to change the style of the element when the section (or button) has the new class.

change style of multiple elements on click or hover in divi

Final Result (Hover)

Once the code has been added, save the changes, and open the page to view the result. Notice how the elements we targeted are being changed when hovering over the button.

change style of multiple elements on click or hover in divi

Changing Styles on Click Instead of Hover

If you want to change the style of those same elements when clicking the button (rather than hovering), all you need to do is make a few changes to the JQuery. Most of the code will stay the same. The main difference is that the “hover” method is replaced with “click”. And we’ve added a helpful snippet of code that changes the text of the button on click.

To add the click functionality, replace the current JQuery with the following (again, make sure it is wrapped in the script tags):

(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 );

change style of multiple elements on click or hover in divi

Here is the final result.

change style of multiple elements on click or hover in divi

Final Thoughts

Being able to target and change the style of multiple elements on a page when hovering or clicking on something is a helpful skill web design. You can use this technique for a variety of use cases (before and afters, CTAs, etc…) Sure, it helps to know a little CSS and JS/JQuery. But, as you have seen in this tutorial, you don’t need to know a tone of code to get some surprising results!

I look forward to hearing from you in the comments.

Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *