Info box with ‘hover’ state
-
Hello
I have a menu featuring ‘info boxes’.
When I land on a page, how can I display a specific info box with its ‘hover’ or ‘active’ background style ?
Thanks for your help.
Best regards
Attachments:
You must be
logged in to view attached files.
Hello,
I found a solution with CSS, but it needs to be repeated for each page ID where my menu is located.
body.page-id-28900.elementor-element-d430e6 .wd-info-box.box-style-bg-hover::after {
opacity: 1 !important;
}
body.page-id-28900.elementor-element-d430e6 .wd-info-box.color-scheme-hover-light .info-box-title,
body.page-id-28900.elementor-element-d430e6 .wd-info-box.color-scheme-hover-light .info-box-inner {
color: #fff !important;
}
body.page-id-28900.elementor-element-d430e6 .info-svg-wrapper img {
filter: brightness(0) invert(1) !important;
}
I think I already asked you this question, but it would be great if, for the ‘Info Box’, we could choose a second image or SVG on a rollover, with the option to link to the ‘Icon’.
Thank you.
Best regards
Hello,
At the moment, the theme doesn’t include a built-in option to automatically set an Info Box to its hover/active state based on the current page URL. Using custom CSS targeting specific page IDs, as you’ve done. Although it needs to be repeated for each corresponding page.
Regarding your suggestion about adding a secondary image/SVG for the hover state, along with the ability to apply a link directly to the icon, this functionality is not available at the moment in this widget.
Best Regards
Hello
Thanks for the feedback. Do you think this option could be added in the future ?
On a classic element, what is the alternative for applying an image or SVG change on hover using Elementor ?
Best regards
Hello,
For any feature request, you can create a feature request here – https://woodmart.userjot.com/ so our developers can take it into account.
Please note that this functionality is not currently available in the WoodMart Info Box widget itself, so it would require using an alternative Elementor widget or a third-party add-on.
https://unlimited-elements.com/change-image-on-hover-in-elementor/
Best Regards
.
