Я пытаюсь создать окно, которое расширяется при наведении и показывает продукты, я создал его, но когда я навожу на него курсор с нижней стороны, анимация при наведении дает некоторый сбойный эффект, и из него выходит только изображение. Я сделал этот эффект с помощью gsap в прослушивателе событий mouseenter и mouseleave, так что не могли бы вы, ребята, взглянуть на мой код и сказать мне, что я делаю неправильно и как мне это исправить.
Вот фрагмент, который вы, ребята, можете проверить, если понадобится.
function page2boxhover() { // box1 наведите курсор на содержимое поля var box = document.querySelector("#box1"); box.addEventListener("mouseenter", () => { gsap.to(коробка, { высота: «300 пикселей», продолжительность: 0,2, }); var img = document.querySelectorAll("#box1 img"); img.forEach(функция (e) { е.стиль.opacity = 1; е.стиль.масштаб = 1; }); }); box.addEventListener("mouseleave", () => { gsap.to(коробка, { высота: «60 пикселей», }); var img = document.querySelectorAll("#page2 .elem .box .boxContent img"); img.forEach(функция (e) { е.style.opacity = 0; е.стиль.масштаб = 0; }); }); // box2 наведите курсор на контекст блока var box2 = document.querySelector("#box2"); box2.addEventListener("mouseenter", () => { gsap.to(box2, { высота: «300 пикселей», продолжительность: 0,2, }); var img = document.querySelectorAll("#box2 .boxContent img"); img.forEach(функция (e) { е.стиль.opacity = 1; е.стиль.масштаб = 1; }); }); box2.addEventListener("mouseleave", () => { gsap.to(box2, { высота: «60 пикселей», }); var img = document.querySelectorAll("#box2 img"); img.forEach(функция (e) { е.style.opacity = 0; е.стиль.масштаб = 0; }); }); //box3 наведите курсор на содержимое поля var box3 = document.querySelector("#box3"); box3.addEventListener("mouseenter", () => { gsap.to(box3, { высота: «300 пикселей», продолжительность: 0,2, }); var img = document.querySelectorAll("#box3 .boxContent img"); img.forEach(функция (e) { е.стиль.opacity = 1; е.стиль.масштаб = 1; }); }); box3.addEventListener("mouseleave", () => { gsap.to(box3, { высота: «60 пикселей», }); var img = document.querySelectorAll("#box3 img"); img.forEach(функция (e) { е.style.opacity = 0; е.стиль.масштаб = 0; }); }); } page2boxhover(); #page2 { дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: пространство между; высота: 100вх; ширина: 100%; дополнение: 3vw 2vw; положение: относительное; } #page2 .elem { высота: 100%; ширина: 31%; переполнение: скрыто; положение: относительное; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; } #page2 .elem img { высота: 100%; ширина: 100%; объектное соответствие: обложка; масштаб: 1,1; } .elem .box { радиус границы: 50 пикселей; высота: 60 пикселей; ширина: 70%; позиция: абсолютная; цвет фона: #c1aaa3; } .elem .box .boxHead { отступ: 20 пикселей 0; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: пространство вокруг; } .boxHead h5 { размер шрифта: 12 пикселей; вес шрифта: 100; } .boxHead h5:nth-child(3) { вес шрифта: 600; } #page2 .elem .box .boxContent { дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; маржа сверху: 40 пикселей; } #page2 .elem .box .boxContent img { отступ: 10 пикселей; высота: 150 пикселей; непрозрачность: 0; масштаб: 0; переход: все 0,2 с; Два хороших партнера МАГАЗИН ГЛАВНАЯ
МАГАЗИН КЛАДОВАЯ
МАГАЗИН ВАННА
