1. Dodajemy klase do kontenera głównego np. custom-hover-white
2. Wklejamy kod CSS:
.custom-hover-white:hover .elementor-heading-title,
.custom-hover-white:hover .elementor-widget-text-editor,
.custom-hover-white:hover .elementor-button,
.custom-hover-white:hover .elementor-button-text {
color: #fff !important; /*KOLOR JAKI CHCESZ*/
fill: #fff !important; /*KOLOR JAKI CHCESZ*/
transition: color 0.2s ease, fill 0.2s ease; /*CZAS PRZEJŚCIA*/
}
tutaj dodatkowo kod:
gdy masz listę ikon:
.custom-hover-white:hover .elementor-icon-list-text,
.custom-hover-white:hover .elementor-icon-list-icon,
.custom-hover-white:hover .elementor-icon-list-icon svg,
.custom-hover-white:hover .elementor-icon-list-icon svg path
gdy jest ikonka:
.custom-hover-white:hover svg,
.custom-hover-white:hover svg path
gdy jakiś element ma border to dodaj ten kod:
.custom-hover-white .elementor-icon-list-item { /* JAKIE OBRAMOWANIE MA BYĆ PRZED NAJECHANIEM*/
border-bottom: 1px solid transparent;
border-bottom-color: #1364FF;
transition: border-bottom-color 0.2s ease;
}
.custom-hover-white:hover .elementor-icon-list-item { /* JAKIE OBRAMOWANIE MA BYĆ PO NAJECHANIU*/
border-bottom: 1px solid transparent;
border-bottom-color: #fff;
}