---
title: "How to Create Interactive Footer Hover Links in Elementor?"
url: https://theplusaddons.com/docs/create-interactive-footer-hover-links-in-elementor/
date: 2024-03-30
modified: 2026-04-09
author: "Aditya Sharma"
description: "Do you want to add interactive footer links in Elementor? Adding interactive links in the footer helps to highlight the hovered link making it easier for users and improving the..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Create-Interactive-Footer-Hover-Links-in-Elementor_-1024x536.jpg
word_count: 359
---

# How to Create Interactive Footer Hover Links in Elementor?

## Key Takeaways

- Style Lists widget from The Plus Addons for Elementor enables the creation of interactive hover links with an inverse hover effect.
- Users can set the opacity of non-selected icon list items in the NotSelected Item Opacity section.
- The Effect Area dropdown allows users to apply the inverse effect either individually or globally to connected icon lists.

Do you want to add interactive footer links in Elementor? Adding interactive links in the footer helps to highlight the hovered link making it easier for users and improving the user experience.

With the Style Lists widget from The Plus Addons for Elementor, you can easily create interactive hover links by adding an inverse hover effect on other items.

*To check the complete feature overview documentation of The Plus Addons for Elementor Style Lists widget, [click here.](https://theplusaddons.com/docs//style-lists-widget-settings-overview/)*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-stylish-list/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To create interactive footer links, add the Style Lists widget to the template and follow the steps -

> *Note: To create the template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.*

1. Add the icon list content from the **Stylish List** tab.

2. Then go to **Style** > **Extra Options** tab and enable the **On Hover Inverse Effect** toggle.

![Interactive Footer Hover Links](https://theplusaddons.com/wp-content/uploads/2024/03/Interactive-Footer-Hover-Links.gif)

From the **NotSelected Item Opacity** section, you can set the opacity of the non selected icon list items.

You can apply different CSS filters to the non selected icon list items from the **NotSelected Item CSS Filter** section.

Then from the **Effect Area** dropdown, you can select where to apply the effect. Here you’ll find two options - 

- **Individual** - This will apply the inverse effect to this icon list only.

- **Global** - With this option, you can connect and add the inverse effect to other icon list items on the page. 

When Global is selected you have to add a unique ID in the **Global List Connection Id** field. Then similarly you have to add the same id in the **Global List Connection Id** fields of the icon lists, you want to connect and add the inverse effect on hover. 

This way when you hover over on anyone one item of one icon list all the items in that icon list and other connected icon list items will show the applied inverse effect.

![Interactive Footer Hover Links Demo](https://theplusaddons.com/wp-content/uploads/2024/03/Interactive-Footer-Hover-Links-Demo.gif)

***Suggested Read:** [How to add Label Tab to Elementor Stylish List](https://theplusaddons.com/docs//add-label-tab-to-elementor-stylish-list/)*

## Frequently Asked Questions

**Q: What should I do if the hover effect isn't working on my footer links?**
A: If the hover effect isn't working, check if the On Hover Inverse Effect toggle is enabled in the Style > Extra Options tab of the Style Lists widget. This toggle is crucial for activating the hover effect. Additionally, ensure that you have set the opacity for non-selected items in the NotSelected Item Opacity section, as this can affect visibility.

**Q: What is the best way to connect multiple icon lists for hover effects?**
A: To connect multiple icon lists for hover effects, select the Global option in the Effect Area dropdown. You'll need to assign a unique ID in the Global List Connection Id field for each list you want to connect. This way, hovering over one item will trigger the inverse effect on all connected lists, creating a cohesive interaction.

**Q: Are there any limitations when using the Style Lists widget?**
A: One limitation is that the Style Lists widget is exclusively compatible with Elementor and does not work with other page builders like Gutenberg or Divi. Ensure that you have The Plus Addons for Elementor installed and activated to access this widget's features.