/* Фото и текст — триггеры наведения */ .hover-trigger { cursor: pointer; } /* Настройки линии */ .dashed-line { position: absolute; top: 0; left: 0; pointer-events: none; } .dashed-line path { fill: none; stroke: #000; stroke-width: 2; stroke-dasharray: 6 6; stroke-dashoffset: 200; transition: stroke-dashoffset 1s ease; } // Соответствие: фото/текст <-> линия const pairs = [ { trigger: '.photo1', line: '.line1' }, { trigger: '.text1', line: '.line1' }, // можно добавлять другие пары: { trigger: '.photo2', line: '.line2' }, ... ]; pairs.forEach(({ trigger, line }) => { const triggers = document.querySelectorAll(trigger); const path = document.querySelector(`${line} path`); if (!path) return; const length = path.getTotalLength(); path.style.strokeDasharray = length; path.style.strokeDashoffset = length; triggers.forEach(el => { el.addEventListener('mouseenter', () => { path.style.transition = 'stroke-dashoffset 1s ease'; path.style.strokeDashoffset = 0; }); el.addEventListener('mouseleave', () => { path.style.transition = 'stroke-dashoffset 1s ease'; path.style.strokeDashoffset = length; }); }); });