document.querySelectorAll('.image-pair').forEach(pair => { const bwImg = pair.querySelector('img:not([src*=".1"])'); const colorImg = pair.querySelector('img[src*=".1"]'); if(bwImg && colorImg) { // Изначально скрываем цветное colorImg.style.opacity = '0'; colorImg.style.position = 'absolute'; colorImg.style.top = '0'; colorImg.style.left = '0'; pair.addEventListener('mouseenter', () => { bwImg.style.opacity = '0'; colorImg.style.opacity = '1'; }); pair.addEventListener('mouseleave', () => { bwImg.style.opacity = '1'; colorImg.style.opacity = '0'; }); } }); - // Только для блока rec1005413856 document.querySelectorAll('#rec1005413856 .image_1').forEach(img => { // Проверяем, есть ли уже цветное изображение (чтобы не дублировать) if (!img.querySelector('img[src*=".1"]')) { img.style.position = 'relative'; // Создаем цветное изображение const colorImg = document.createElement('img'); colorImg.src = 'image_1.1.png'; // Убедитесь что путь правильный! colorImg.style.position = 'absolute'; colorImg.style.top = '0'; colorImg.style.left = '0'; colorImg.style.width = '100%'; colorImg.style.height = '100%'; colorImg.style.objectFit = 'cover'; colorImg.style.opacity = '0'; colorImg.style.transition = 'opacity 0.4s'; // Добавляем в DOM img.appendChild(colorImg); // Обработчики событий img.addEventListener('mouseenter', () => { colorImg.style.opacity = '1'; }); img.addEventListener('mouseleave', () => { colorImg.style.opacity = '0'; }); } });