鼠标悬停在菜单栏时，该位置颜色随机变换

电脑效果在评论区

代码不太完美，bug自测。代码没对齐，能用就行！一个css  一个js 放主题自定义

/* 子比主题菜单栏悬停效果 */


.menu {
  list-style: none;
  display: flex;
}

.sub-menu {
  padding: 10px;
  background-color: #f0f0f0;
  margin-right: 10px;
  cursor: pointer;
}

.sub-menu:hover {
  /* 在这里添加悬停效果 */

            animation: randomColor 0.5s forwards;

        }

        @keyframes randomColor {

            to {

                background-color: hsl(calc(360 * var(--random)), 70%, 70%);

            }
}

document.querySelectorAll('.menu-item').forEach(function (item) {
  item.addEventListener('mouseover', function () {
    var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    this.style.backgroundColor = randomColor;
  });
});