Инструкция
В стандартных блоках футера Tilda нельзя отдельно настроить цвет ссылок и иконок соцсетей при наведении. Эта модификация добавляет такой эффект без создания футера в Zero Block.
Код проверен для блока FT302, но не привязан к его внутреннему классу .t420. Поэтому он также работает с другими стандартными футерами, если ссылки в них созданы как обычные ссылки, а иконки соцсетей добавлены стандартным элементом Tilda.
Код проверен для блока FT302, но не привязан к его внутреннему классу .t420. Поэтому он также работает с другими стандартными футерами, если ссылки в них созданы как обычные ссылки, а иконки соцсетей добавлены стандартным элементом Tilda.
- Добавьте на страницу стандартный блок футера, например FT302.
- Откройте настройки футера и укажите в поле «CSS-класс блока» класс footerhover.
- Добавьте на страницу блок T123 и вставьте в него код модификации.
- Чтобы выбрать цвет при наведении, замените значение #FD411B в строке с переменной --footer-hover-color.
- Опубликуйте страницу и проверьте наведение на пункты меню, другие текстовые ссылки и иконки соцсетей.
Важно:
Модификация меняет цвет всех текстовых ссылок внутри выбранного футера, кроме кнопок. Если в футере есть ссылка, цвет которой не должен меняться, для неё потребуется отдельное исключение.
Стандартные SVG-иконки соцсетей Tilda перекрашиваются. Если иконка загружена как изображение PNG, JPG или WebP, изменить её цвет через fill нельзя.
Стандартные SVG-иконки соцсетей Tilda перекрашиваются. Если иконка загружена как изображение PNG, JPG или WebP, изменить её цвет через fill нельзя.
<!-- Стили, которые меняют цвет текстовых ссылок и стандартных иконок соцсетей при наведении в футере Tilda. Источник: bulgkate.ru -->
<style>
.uc-footerhover {
--footer-hover-color: #FD411B; /* Укажите нужный цвет */
}
.uc-footerhover a:not(.t-btn) {
transition: color 0.2s ease;
}
.uc-footerhover a:not(.t-btn):hover,
.uc-footerhover a:not(.t-btn):focus-visible {
color: var(--footer-hover-color) !important;
}
.uc-footerhover .t-sociallinks__item .t-sociallinks__svg path {
transition: fill 0.2s ease;
}
.uc-footerhover .t-sociallinks__item a:hover .t-sociallinks__svg path,
.uc-footerhover .t-sociallinks__item a:focus-visible .t-sociallinks__svg path {
fill: var(--footer-hover-color) !important;
}
</style>
