We need to make sure that when we are not on ( .navigation-link or .navigation-list ) only then the event is deleted. Tell me how to implement it?

 'use strict'; const linkElements = document.querySelectorAll('.navigation-link'), listItem = document.querySelector('.navigation-list'); for (let i = 0; i < linkElements.length; i++) { const element = linkElements[i], x_pos = element.offsetWidth / 2 + element.offsetLeft, y_pos = element.offsetTop + element.offsetHeight / 2, translate = 'translate(' + x_pos + 'px, ' + y_pos + 'px)', scale = 'scale(' + element.offsetWidth + ', ' + element.offsetHeight + ')', underline = document.querySelector('.underline') // console.log(element.getBoundingClientRect()); underline.style.transform = 'translate(446.5px, 27px) ' + 'scale(45, 20)'; element.addEventListener('mouseenter', (e)=> { if (e.target || e.currentTarget === listItem) { underline.style.transform = translate + ' ' + scale; underline.classList.add('animation-outline'); console.log(translate + ' ' + scale); } }); } 
 .right-side { width: 65%; display: flex; align-items: center; } .underline { position: absolute; top: 38px; left: 0; width: 1px; height: 1px; transition: transform 0.5s cubic-bezier(0.33, 1.61, 0, 0.83); } .animation-outline { background-color: #E4D442; } .navigation, .navigation-list { width: 100%; margin-right: 52px; } .navigation-list { display: flex; align-items: center; justify-content: center; height: 100%; } .navigation-item { margin-right: auto; &:last-child { margin-right: 0; } } .navigation-link { font-size: 18px; line-height: 1.6; font-weight: 400; color: #fff; position: relative; padding: 10px 0; &:hover { &:before { width: 100%; } } } 
 <div class="right-side"> <div class="underline outline"></div> <nav class="navigation"> <ul class="navigation-list"> <li class="navigation-item"> <a href="javascript:void(0);" class="navigation-link"> About </a> </li> <li class="navigation-item"> <a href="javascript:void(0);" class="navigation-link"> Features </a> </li> <li class="navigation-item"> <a href="javascript:void(0);" class="navigation-link"> Reviews </a> </li> <li class="navigation-item"> <a href="javascript:void(0);" class="navigation-link"> Blog </a> </li> <li class="navigation-item"> <a href="javascript:void(0);" class="navigation-link"> Support </a> </li> </ul> </nav> <a href="javascript:(0);" class="btn-app">Get App</a> </div>

    1 answer 1

     const linkElements = document.querySelectorAll('.navigation-link'), listItem = document.querySelector('.navigation-list'); for (let i = 0; i < linkElements.length; i++) { const element = linkElements[i], x_pos = element.offsetWidth / 2 + element.offsetLeft, y_pos = element.offsetTop + element.offsetHeight / 2, translate = 'translate(' + x_pos + 'px, ' + y_pos + 'px)', scale = 'scale(' + element.offsetWidth + ', ' + element.offsetHeight + ')', underline = document.querySelector('.underline') // console.log(element.getBoundingClientRect()); underline.style.transform = 'translate(446.5px, 27px) ' + 'scale(45, 20)'; element.addEventListener('mouseenter', (e)=> { if (e.target || e.currentTarget === listItem) { underline.style.transform = translate + ' ' + scale; underline.classList.add('animation-outline'); console.log(translate + ' ' + scale); } element.addEventListener('mouseleave',(e)=>{ underline.classList.remove('animation-outline'); }) }); } 
     .right-side { width: 65%; display: flex; align-items: center; } .underline { position: absolute; top: 38px; left: 0; width: 1px; height: 1px; transition: transform 0.5s cubic-bezier(0.33, 1.61, 0, 0.83); } .animation-outline { background-color: #E4D442; } .navigation, .navigation-list { width: 100%; margin-right: 52px; } .navigation-list { display: flex; align-items: center; justify-content: center; height: 100%; } .navigation-item { margin-right: auto; &:last-child { margin-right: 0; } } .navigation-link { font-size: 18px; line-height: 1.6; font-weight: 400; color: #fff; position: relative; padding: 10px 0; &:hover { &:before { width: 100%; } } } 
     <div class="right-side"> <div class="underline outline"></div> <nav class="navigation"> <ul class="navigation-list"> <li class="navigation-item"> <a href="javascript:void(0);" class="navigation-link"> About </a> </li> <li class="navigation-item"> <a href="javascript:void(0);" class="navigation-link"> Features </a> </li> <li class="navigation-item"> <a href="javascript:void(0);" class="navigation-link"> Reviews </a> </li> <li class="navigation-item"> <a href="javascript:void(0);" class="navigation-link"> Blog </a> </li> <li class="navigation-item"> <a href="javascript:void(0);" class="navigation-link"> Support </a> </li> </ul> </nav> <a href="javascript:(0);" class="btn-app">Get App</a> </div>