AndriiS,
css лучше, но если хочется погорячее ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main__menu__list {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.main__menu__list__item {
width: 100px;
height: 100px;
list-style-type: none;
font-weight: bolder;
font-family: Tahoma;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
background-color: #69B8E7;
text-transform: uppercase;
color: white;
font-size: 1em;
text-shadow: 2px 2px blue;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.3rem;
cursor: pointer;
/* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); */
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.test {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<nav class="main__menu">
<ul class="main__menu__list">
<li class="main__menu__list__item js__button">
<p clas="main__menu__content">I am</p>
</li>
<li class="main__menu__list__item js__button">
<p clas="main__menu__content">I have</p>
</li>
<li class="main__menu__list__item js__button">
<p clas="main__menu__content">I know</p>
</li>
<li class="main__menu__list__item js__button">
<p clas="main__menu__content">I want</p>
</li>
<li class="main__menu__list__item js__button">
<p clas="main__menu__content">I dream</p>
</li>
<li class="main__menu__list__item js__button">
<p clas="main__menu__content">Lorem</p>
</li>
<li class="main__menu__list__item js__button">
<p clas="main__menu__content">Lorem</p>
</li>
<li class="main__menu__list__item js__button">
<p clas="main__menu__content">Lorem</p>
</li>
<li class="main__menu__list__item js__button">
<p clas="main__menu__content">Lorem</p>
</li>
</ul>
</nav>
<script>
'use strict';
const button = document.querySelectorAll ('.js__button');
function createColor () {
const R = Math.random () * 256|0;
const G = Math.random () * 256|0;
const B = Math.random () * 256|0;
return `rgb(${R},${G},${B})`;
}
function createArr (arr) {
arr.forEach (function (item, i) {
item.style.backgroundColor = createColor();
});
}
createArr (button);
const clickButton = document.querySelector ('.main__menu__list');
clickButton.addEventListener ('mouseover', handler1);
let temp;
function handler1 (event) {
const target = event.target;
if (target.nodeName == 'LI'&& temp !== target){
handler2();
temp = target;
target.classList.add ('test');
}
}
clickButton.addEventListener ('mouseleave', handler2);
function handler2 () {
let target = clickButton.querySelector('.test');
target && target.classList.remove('test');
temp = null;
}
</script>
</body>
</html>