Как отловить событие мыши?

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>