Area Type: Hover


Hover Areas are initially hidden and are displayed when the user clicks on an element or hovers above it.

Every Hover Area is “attached” to another element on the page, which is called “trigger element“. While the Area is displayed, it is aligned to that trigger element – when the trigger element moves up or down (while scrolling) or changes size, the Hover Area also moves to stay at the same relative position. This makes Hover Areas an ideal solution for mega menus or tooltips.

There is no “Keep Closed” option to permanently close Hover Areas.

Possible Triggers

Hover Areas can be triggered by click or hover events.

Those events will always trigger the Area, there is no option to show a Hover Area only once per request.

Usage examples

With Divi Areas Pro you can create a mega menu (or simply a custom menu) that is displayed when the user clicks on a main menu item.


When using the JS API to open a Hover Area, make sure to provide a trigger element as second parameter of

// Trigger a Hover Area via JS API and align it to the <button class="cta"> element:'my-hover-area', jQuery('button.cta'));
Was this article helpful?

Related Articles

Need Support?

Can't find the answer you're looking for?
Get in touch with us