Trigger Multiple Widgets in a single column

Hi there,

Thank you for contacting us.

You can achieve this effect using custom CSS. The idea is to apply a hover effect to all the widgets within a column when the column itself is hovered. Here’s how you can do it using only CSS:

Steps:

1. First, assign a custom CSS class to your column (e.g., hover-trigger-column).
2. Then, apply the following CSS:

Select the column by its custom class:

.hover-trigger-column:hover .elementor-widget {

background-color: #f0f0f0; /* Change background color */

transform: scale(1.05); /* Slight scaling effect */

transition: all 0.3s ease; /* Smooth transition */ }

How it works:

• The hover-trigger-column:hover .elementor-widget selector targets all widgets inside the column when the column itself is hovered.
• You can add any hover styles you need for the widgets, such as changing background color, scaling, opacity, etc.
• You can also add widget-specific hover effects separately, but this ensures that all widgets respond to hovering over the column as a whole.

Adding the Custom Class:

• In Elementor, select the column you want to target.
• Under Advanced → put class, add the class name (e.g., hover-trigger-column).
• Then, place the custom CSS code either in Elementor → Site Settings → Custom CSS (if using Elementor Pro) or within your theme’s CSS file.

This method should work without the need for JavaScript. When you hover over any part of the column, it will trigger the hover effect on all the widgets inside the column.

Hope this helps.

Kind regards,

Hi Milos,

Thank you for replying. I did apply this code but it’s adding a new hover effect. What I want is the existing hover effect to be triggered. The widget I have is an Icon widget. If I hover on it directly, its colours change, I want that effect to trigger when I hover anywhere inside the column. See the image below:

Regards,

Asim

Hi @skyhightech

Thank you for your message. Please note that the image files you wanted to share haven’t been included in the message.

I understand what you are trying to achieve. This needs to be added as a new hover effect because you target a different element in HTML structure (div elementor-column). The logic here is to use the Elementor column to declare the hover state and then target inside widgets with the animation, change of style, etc. You can use the same hover effect as you declared for the Icon widget. For example, if the Icon widget has a change in color on hover:

.elementor-icon:hover {
color: #FF0000;
border-color: #FF0000;
}

You can use the same property with the column hover:

.hover-trigger-column:hover .elementor-icon {
color: #FF0000;
border-color: #FF0000;
}

I hope this helps and explains how to use this.
Kind regards,

Due to inactivity this ticket has been closed.