Интерактивные подсказки HTML+JavaScript. Меняем цвет SVG при наведении

Опубликовано: 05 Март 2026
на канале: Aida Drogan #BlondieCode
3,915
267

Интересная интерактивная схема с подсказками для сайта от #BlondieCode. Добавляем #SVG на страницу HTML в тег object, мониторим события mouseover и mouseout на элементах svg-изображений. Динамически меняем цвет SVG.
00:00 - Техническое задание и плоские шутки
01:56 - Что внутри у SVG?
02:18 - Добыча халявной векторной графики
02:44 - Подготовка SVG-файлы к работе
04:31 - HTML-страница
05:56 - Подключение модуля с интерактивными подсказками, опции
09:12 - Загрузка SVG в теге object
11:48 - События mouseover/mouseout на SVG, изменение цвета
15:19 - Рекурсивный поиск всех дочерних элементов (в SVG или HTML)
// ---------------- Ссылки на материалы -------------- //
➣ Исходники проекта --- https://github.com/droganaida/svghints
➣ Поэма об SVG ---    • Анимации в стихах на котах и на мышах  
➣ Весёлая рекурсия ---    • Рекурсия. Урок 6. #BlondieCode  
➣ Фичи ES2020 ---    • ECMAScript 2020: Что нового в JavaScript в...  
// ------------------------------------------------------------------------ //
// -------- Присоединиться к комьюнити -------- //
// ------------------------------------------------------------------------ //
➣ Telegram --- https://t.me/joinchat/HOEP30yXRyBQp4e...
➣ GitHub --- https://github.com/droganaida
➣ Facebook ---   / blondiecode  
➣ Coub --- https://coub.com/aida-drogan
// ------------------------------------------------------------------------ //
//------------ Поблагодарить за видео ----------------- //
// ------------------------------------------------------------------------ //
➣ Кинуть монетку на корм коту --- https://www.paypal.com/cgi-bin/webscr...
➣ Купить прикольную футболку с принтом из видосиков --- https://www.teepublic.com/user/drogan...
//-----------------------------------------------//
Больше видео на тему IT можно найти по тегу #ityoutubersru