Проблемы с задержкой перехода для центрального элемента #about div при наведении курсора мыши на другие элементы . ⇐ Javascript

[Гость]

Я учусь тому, как начать карьеру веб-разработчика, и до сих пор создаю веб-сайт-портфолио, одновременно узнавая что-то новое каждый день.

Я создаю портфолио с 5 основными DIV-элементами, расположенными в виде смещенной сетки, и использую JS, чтобы элемент div при наведении курсора мыши казался больше, а другие элементы div «отходили в сторону», чтобы элемент управления курсором мыши увеличивался (я я не использую transform = Scale()). Каждый элемент div растет по-своему, другие соответственно перемещаются, и все возвращается к исходному масштабу и положению при отпускании мыши. Страница выглядит, как показано ниже; Макет сайта

Проблема в том, что я установил для свойства перехода значение transition: .5s easy-in-out; для всех элементов div быстрое перемещение курсора мыши по разным боковым элементам, по-видимому, влияет на переход #about Div. Он довольно сильно отстает. Я новичок в веб-разработке, поэтому мой код, возможно, не самый лучший с точки зрения читабельности, я еще не овладел этим навыком, поэтому заранее извиняюсь. Соответствующий код HTML, CSS и JS ниже;

html

Образование Навыки Контакт О программе История трудоустройства css

/* ------------------Средний раздел---------------------- */ :корень{ -- Граница: .3em сплошной черный; } .middleDiv { выровнять-сам: центр; цвет фона: оранжевый; высота: 90%; ширина: 95%; позиция: абсолютная; Топ-5%; слева: 2,5%; маржа: 0; заполнение: 0; граница: нет; } .innerDiv{ позиция: абсолютная; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; высота: 50 пикселей; ширина: 50 пикселей; цвет фона: бежевый; размер коробки: граница-коробка; переход: 0,5 с, легкость входа и выхода; } #образование{ верх: 0%; слева: 0%; правая граница: .3em сплошной черный; } #навыки{ верх: 0%; справа: 0%; нижняя граница: .3em сплошной черный; } #контакт{ слева: 0%; внизу: 0%; граница-топ: .3em сплошной черный; } .о{ высота: 20%; ширина: 20%; верх: 40%; осталось: 40%; z-индекс: 1; граница: .3em сплошная черная; } #работа{ внизу: 0%; справа: 0%; левая граница: .3em сплошной черный; } .eduWork{ высота: 40%; ширина: 60%; } .skillCont{ высота: 60%; ширина: 40%; } /*---------------------------------------------------------------- -----------------------------*/ /* ---------------------------на прослушивателях событий------------------- ------------ */ .growEduWork{ высота: 60%; ширина: 80%; } .growSkillCont{ высота: 80%; ширина: 60%; } .eduWorkOnMouseOverSkillCont1{ высота: 20%; ширина: 80%; } .eduWorkOnMouseOverSkillCont2{ высота: 60%; ширина: 40%; } .EduWorkOnMouseOverEduWork{ высота: 20%; ширина: 40%; } .SkillContOnMouseOverEduWork{ ширина: 20%; высота: 80%; } .SkillContOnMouseOverAbout{ ширина: 80%; высота: 20%; } .skillContOnMouseOverEduWork2 { высота: 40%; ширина: 60%; } .skillContOnMouseOverSkillCont{ высота: 40%; ширина: 20%; } .eduWorkOnMouseOverAbout{ высота: 80%; ширина: 20%; } .growAbout{ высота: 60%; ширина: 60%; верх: 20%; осталось: 20%; граница: вар (-- граница); } .aboutWhenMouseOverEdu{ верх: 60%; осталось: 60%; } .aboutOnMouseOverWork{ верх: 20%; осталось: 20%; } .aboutOnMouseOverSkill{ верх: 60%; осталось: 20%; } .aboutOnMouseOverCont{ верх: 20%; левый: 60%; } /*----------------------------------------------*/ JS

const education = document.querySelector('#education'); const навыки = document.querySelector('#skills'); const contact = document.querySelector('#contact'); const about = document.querySelector('#about'); const work = document.querySelector('#work'); education.addEventListener('mouseover', function(e){ education.classList.add('growEduWork'); навыки.classList.add('SkillContOnMouseOverEduWork'); work.classList.add('EduWorkOnMouseOverEduWork'); about.classList.add('aboutWhenMouseOverEdu'); contact.classList.add('skillContOnMouseOverEduWork2') }) education.addEventListener('mouseleave', function(e){ education.classList.remove('growEduWork'); навыки.classList.remove('SkillContOnMouseOverEduWork'); work.classList.remove('EduWorkOnMouseOverEduWork'); about.classList.remove('aboutWhenMouseOverEdu'); contact.classList.remove('skillContOnMouseOverEduWork2') }) about.addEventListener('mouseover', function(e){ about.classList.add('growAbout'); навыки.classList.add('SkillContOnMouseOverAbout'); education.classList.add('eduWorkOnMouseOverAbout'); contact.classList.add('SkillContOnMouseOverAbout'); work.classList.add('eduWorkOnMouseOverAbout'); }); about.addEventListener('mouseleave', function(e){ about.classList.remove('growAbout'); навыки.classList.remove('SkillContOnMouseOverAbout'); education.classList.remove('eduWorkOnMouseOverAbout'); contact.classList.remove('SkillContOnMouseOverAbout'); work.classList.remove('eduWorkOnMouseOverAbout'); }) work.addEventListener('mouseover', function(e){ work.classList.add('growEduWork') education.classList.add('EduWorkOnMouseOverEduWork'); about.classList.add('aboutOnMouseOverWork'); contact.classList.add('SkillContOnMouseOverEduWork'); навыки.classList.add('skillContOnMouseOverEduWork2'); }); work.addEventListener('mouseleave', function(e){ work.classList.remove('growEduWork') education.classList.remove('EduWorkOnMouseOverEduWork'); about.classList.remove('aboutOnMouseOverWork'); contact.classList.remove('SkillContOnMouseOverEduWork'); навыки.classList.remove('skillContOnMouseOverEduWork2'); }); навыки.addEventListener('mouseover', function(e){ навыки.classList.add('growSkillCont'); work.classList.add('eduWorkOnMouseOverSkillCont1'); education.classList.add('eduWorkOnMouseOverSkillCont2'); about.classList.add('aboutOnMouseOverSkill'); contact.classList.add('skillContOnMouseOverSkillCont'); }); навыки.addEventListener('mouseleave', function(e){ навыки.classList.remove('growSkillCont'); work.classList.remove('eduWorkOnMouseOverSkillCont1'); education.classList.remove('eduWorkOnMouseOverSkillCont2'); about.classList.remove('aboutOnMouseOverSkill'); contact.classList.remove('skillContOnMouseOverSkillCont'); }); contact.addEventListener('mouseover', function(e){ contact.classList.add('growSkillCont'); education.classList.add('eduWorkOnMouseOverSkillCont1'); work.classList.add('eduWorkOnMouseOverSkillCont2'); about.classList.add('aboutOnMouseOverCont'); навыки.classList.add('skillContOnMouseOverSkillCont'); }); contact.addEventListener('mouseleave', function(e){ contact.classList.remove('growSkillCont'); education.classList.remove('eduWorkOnMouseOverSkillCont1'); work.classList.remove('eduWorkOnMouseOverSkillCont2'); about.classList.remove('aboutOnMouseOverCont'); навыки.classList.remove('skillContOnMouseOverSkillCont'); }); Я пробовал увеличивать и уменьшать время перехода, проблема не возникает только тогда, когда переход вообще не используется, что выглядит не очень хорошо. Недостаточно опыта, чтобы знать, где еще исследовать, хотя единственный затронутый элемент div - это центральный элемент управления, положение которого меняется по отношению к различным прослушивателям событий, поэтому подозреваю, что проблемы кроются в центральном элементе управления #about.