---
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-09-14
lang: en
author: "Aditya Sharma"
description: "Fading everything except the link under the pointer makes a busy footer far easier to read, and it works just as well for a sidebar or a menu of services...."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Create-Interactive-Footer-Hover-Links-in-Elementor_-1024x536.jpg
word_count: 666
---

# How to Create Interactive Footer Hover Links in Elementor?

## 

- Style Lists widget in The Plus Addons for Elementor calls the hover fade behavior the On Hover Inverse Effect, and it can reach across several lists at once.
- The Plus Addons for Elementor sets Effect Area to Global and uses the same Global List Connection Id, such as footer-links, to connect multiple footer columns.
- Not Selected Item Opacity defaults to 0.6, and Not Selected Item CSS Filter only applies when it is set to Custom.
- Touch screens do not trigger the effect, and Font Awesome 4 icons can come out blank on a page that has no other Font Awesome user.

Fading everything except the link under the pointer makes a busy footer far easier to read, and it works just as well for a sidebar or a menu of services.

The Style Lists widget in The Plus Addons for Elementor calls this the **On Hover Inverse Effect**, and it can reach across several lists at once.

*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 it's installed & activated to enjoy all its powers.***

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

## Before You Start

- **Edition:** **Free** — Style Lists is part of the free The Plus Addons for Elementor plugin.- **Widget to enable:** **Stylish List**, switched on under **The Plus Addons > Widgets**. That is the card name on the Widgets screen; in the Elementor panel the widget is called **Style Lists**.- **Icons:** the widget does not load Font Awesome's stylesheet. Font Awesome 5 icons are drawn as inline SVG and always show; Font Awesome 4 icons (including the three defaults) come out blank on a page that has no other Font Awesome user.

## Steps

- Add a **Style Lists** widget for each footer column and fill in its items.- Open **Style > Extra Options** and switch **On Hover Inverse Effect** on.- Set **Not Selected Item Opacity** for how far the other items should fade.- Optionally open **Not Selected Item CSS Filter**, set it to **Custom** and add a blur or a brightness change.

![On Hover Inverse Effect switched on in Style, Extra Options of the Style Lists widget, with Not Selected Item Opacity set to 0.6](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-inverse.webp)

## Linking Several Lists

By default the effect stops at the widget it is on. To make one footer column dim the others:

- Set **Effect Area** to **Global**.- Type the same word into **Global List Connection Id** on every list you want connected, for example *footer-links*.- Give each connected list the same **Not Selected Item Opacity** and CSS filter, since each list carries its own values.

![Effect Area set to Global and Global List Connection Id set to footer-links in the Style Lists Extra Options](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-inverse-global.webp)

![A dark multi-column footer on the front end where hovering one link keeps it bright and fades every other link in all the columns](https://theplusaddons.com/wp-content/uploads/2024/03/Interactive-Footer-Hover-Links-Demo.gif)

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| On Hover Inverse Effect | Turns the effect on for this list. | Hide |
| Not Selected Item Opacity | Opacity of every item except the hovered one (0 to 1). | 0.6 |
| Not Selected Item CSS Filter | Blur, brightness, contrast, saturation and hue for the faded items. Only applied when it is set to **Custom**. | off |
| Effect Area | **Individual** keeps the effect inside this list; **Global** shares it with the lists that carry the same id. | Individual |
| Global List Connection Id | The word that links lists together. Appears only when Effect Area is Global. | empty |

## How It Behaves

- Only the list being hovered fades — nothing happens until the pointer is over one of its items.- The hovered item stays fully opaque and unblurred; everything else takes the opacity and filter you set.- With **Global** and a shared id, hovering one item fades the other items in its own list *and* every item in each connected list.- The effect is pure hover, so it applies to the items themselves — links, icons and text all fade together.

## Limitations

- There is no hover on touch screens, so the effect does nothing on phones and tablets.- The CSS filter is ignored unless the filter control is switched to **Custom**; leaving it off means only the opacity changes.- Connected lists do not share their settings. Give each one the same opacity and filter or the columns will fade by different amounts.- **Global List Connection Id** is a plain text field with no picker, so a typo silently leaves that list out of the group.

## Troubleshooting

### Nothing fades

Check **On Hover Inverse Effect** is on in **Style > Extra Options** — it is in the Style tab, not the Content tab.

### Only one column reacts

Set **Effect Area** to **Global** on every column and give them all exactly the same **Global List Connection Id**.

### The columns fade by different amounts

Each list uses its own **Not Selected Item Opacity**. Copy the same value into every connected list.

### The blur does not apply

Open **Not Selected Item CSS Filter** and choose **Custom** before setting the sliders.

## Related Docs

- [Style Lists Widget: Settings Overview](https://theplusaddons.com/docs/style-lists-widget-settings-overview/)- [How to Change Elementor List Item Background on Hover?](https://theplusaddons.com/docs/change-elementor-list-item-background-on-hover/)- [How to Add a Custom Link to Each Elementor Icon List?](https://theplusaddons.com/docs/custom-link-to-each-elementor-icon-list/)

## Frequently Asked Questions

**Q: Why does the footer hover fade only affect one list instead of the whole footer?**
A: That happens when the effect is left in Individual mode. The Style Lists widget in The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses Effect Area to decide whether the hover inverse effect stays inside one widget or spreads across connected lists. Set Effect Area to Global and give every connected list the same Global List Connection Id so the fade can reach multiple columns.

**Q: What do I need before creating interactive footer hover links in Elementor?**
A: The key requirement is that the Style Lists widget is part of The Plus Addons for Elementor and must be installed and activated. In the free edition, the widget appears as Stylish List under The Plus Addons > Widgets, while inside Elementor it is called Style Lists. One gotcha is icons: Font Awesome 5 icons render as inline SVG, but Font Awesome 4 icons can show blank if nothing else on the page loads Font Awesome.

**Q: How do I make several footer columns fade together on hover?**
A: The shared-hover setup depends on a matching connection ID. Put a Style Lists widget in each footer column, switch On Hover Inverse Effect on, set Effect Area to Global, and use the same Global List Connection Id on every connected list, such as footer-links. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH treats each list separately for its own opacity and filter values, so those settings also need to match if you want identical fading.

**Q: Why does the blur not show on my faded footer links?**
A: The blur only applies when Not Selected Item CSS Filter is set to Custom. If that control stays off, the effect falls back to opacity only. That matters because the page lets you change blur, brightness, contrast, saturation, and hue for the non-hovered items, but none of those sliders take effect until Custom is selected. This is easy to miss when testing a footer that looks like it should be dimming more aggressively.

**Q: Does interactive footer hover work on phones and tablets?**
A: It does not react on touch screens because there is no hover state there. The effect is pure hover, so it only runs when a pointer moves over an item in the list. That means links, icons, and text all fade together on desktop-style hover interactions, but phones and tablets will not trigger the inverse effect at all.

**Q: What settings should I copy across connected lists so they fade evenly?**
A: Copy both Not Selected Item Opacity and Not Selected Item CSS Filter across every connected list. Each list carries its own values, so if one column uses 0.6 and another uses a different opacity or filter setup, they will fade by different amounts even when they share the same Global List Connection Id. The Plus Addons for Elementor makes this a per-widget setting rather than a global one.