Title: Trigger Multiple Widgets in a single column
Last modified: September 29, 2024

---

# Trigger Multiple Widgets in a single column

 *  Resolved [skyhightech](https://wordpress.org/support/users/skyhightech/)
 * (@skyhightech)
 * [1 year, 8 months ago](https://wordpress.org/support/topic/trigger-multiple-widgets-in-a-single-column/)
 * Hi,
 * I’m using Free Elementor and I have a column (the old version of column) and 
   inside that column, I have multiple widgets. every widget has a hover effect..
   I am looking for a way to have all these widgets to trigger their hover state
   when I hover my mouse anywhere in that column. 
   Can anyone help me achieve this
   effect with just CSS. I would highly appreciate it.
 * Thanks,
 * Asim
    -  This topic was modified 1 year, 8 months ago by [skyhightech](https://wordpress.org/support/users/skyhightech/).

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Support [Milos](https://wordpress.org/support/users/miloss84/)
 * (@miloss84)
 * [1 year, 8 months ago](https://wordpress.org/support/topic/trigger-multiple-widgets-in-a-single-column/#post-18043454)
 * 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,
 *  Thread Starter [skyhightech](https://wordpress.org/support/users/skyhightech/)
 * (@skyhightech)
 * [1 year, 8 months ago](https://wordpress.org/support/topic/trigger-multiple-widgets-in-a-single-column/#post-18044613)
 * 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:
 * ![](https://wordpress.org/1032f1b4-a610-4a91-b196-7fc2d97a804a)
 * Regards,
 * Asim
 *  [Nemanja](https://wordpress.org/support/users/nemanjat/)
 * (@nemanjat)
 * [1 year, 8 months ago](https://wordpress.org/support/topic/trigger-multiple-widgets-in-a-single-column/#post-18048967)
 * Hi [@skyhightech](https://wordpress.org/support/users/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:
 *     ```wp-block-code
       .elementor-icon:hover {color: #FF0000;border-color: #FF0000;}
       ```
   
 * You can use the same property with the column hover:
 *     ```wp-block-code
       .hover-trigger-column:hover .elementor-icon {color: #FF0000;border-color: #FF0000;}
       ```
   
 * I hope this helps and explains how to use this. 
   Kind regards,
 *  Plugin Support [Rica](https://wordpress.org/support/users/ricav/)
 * (@ricav)
 * [1 year, 8 months ago](https://wordpress.org/support/topic/trigger-multiple-widgets-in-a-single-column/#post-18066488)
 * Due to inactivity this ticket has been closed.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Trigger Multiple Widgets in a single column’ is closed to new replies.

 * ![](https://ps.w.org/elementor/assets/icon-256x256.gif?rev=3444228)
 * [Elementor Website Builder - more than just a page builder](https://wordpress.org/plugins/elementor/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/elementor/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/elementor/)
 * [Active Topics](https://wordpress.org/support/plugin/elementor/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/elementor/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/elementor/reviews/)

 * 4 replies
 * 4 participants
 * Last reply from: [Rica](https://wordpress.org/support/users/ricav/)
 * Last activity: [1 year, 8 months ago](https://wordpress.org/support/topic/trigger-multiple-widgets-in-a-single-column/#post-18066488)
 * Status: resolved