Characteristics
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.
Notes
When using the JS API to open a Hover Area, make sure to provide a trigger element as second parameter of DiviArea.show()
// Trigger a Hover Area via JS API and align it to the <button class="cta"> element:
DiviArea.show('my-hover-area', jQuery('button.cta'));