js文字描述菜单鼠标悬浮在上面就会变色的特效

实现菜单鼠标悬浮在上面就会变色的特效，可以使用 JavaScript 和 CSS。下面是实现菜单鼠标悬浮变色特效的基本步骤：

1. 在 HTML 中创建一个菜单列表，并为每个菜单项设置一个唯一的 ID。
2. 使用 CSS 定义菜单项的样式，包括默认颜色和悬浮颜色。
3. 使用 JavaScript 监听菜单项的 `mouseover` 和 `mouseout` 事件，当鼠标移动到菜单项上时，将菜单项的颜色设置为悬浮颜色，当鼠标移开菜单项时，将菜单项的颜色设置为默认颜色。

以下是一个实现菜单鼠标悬浮变色特效的示例代码：

HTML 代码：

<ul>
  <li id="menu-item-1"><a href="#">菜单项1</a></li>
  <li id="menu-item-2"><a href="#">菜单项2</a></li>
  <li id="menu-item-3"><a href="#">菜单项3</a></li>
</ul>

CSS 代码：

ul li {
  display: inline-block;
  margin-right: 20px;
  padding: 10px;
  background-color: #ccc;
  color: #fff;
}

ul li:hover {
  background-color: #666;
}

JavaScript 代码：

var menuItems = document.querySelectorAll('ul li');

for (var i = 0; i < menuItems.length; i++) {
  var menuItem = menuItems[i];

  menuItem.addEventListener('mouseover', function() {
    this.style.backgroundColor = '#666';
  });

  menuItem.addEventListener('mouseout', function() {
    this.style.backgroundColor = '#ccc';
  });
}

上述代码中，我们使用 `querySelectorAll()` 方法获取所有菜单项，并使用循环为每个菜单项添加 `mouseover` 和 `mouseout` 事件监听器。当鼠标移动到菜单项上时，我们将菜单项的背景颜色设置为悬浮颜色，当鼠标移开菜单项时，我们将菜单项的背景颜色设置为默认颜色。