div+css实现鼠标经过背景高亮的导航菜单代码

使用div+CSS来实现鼠标经过背景高亮的导航菜单是一个常见的网页开发需求。通过添加合适的样式和事件处理，我们可以实现当鼠标悬停在导航菜单上时，菜单项的背景色会改变，给用户更好的交互体验。

以下是实现这一效果的详细步骤：

1. 创建HTML结构

首先，我们需要创建一个导航菜单的HTML结构。通常情况下，导航菜单是一个无序列表（ul）包含多个列表项（li），每个列表项是一个链接（a）。

<ul class="menu">
  <a href="#>>Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</ul>

2. 添加CSS样式

接下来，我们需要添加CSS样式来定义导航菜单的外观和行为。我们给导航菜单的每个列表项添加一个类名（menu-item），用于选择样式。

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-item {
  display: inline-block;
  padding: 10px;
  background-color: #eee;
  transition: background-color 0.3s;
}
.menu-item a {
  text-decoration: none;
  color: #333;
}
.menu-item:hover {
  background-color: #ccc;
}

这段CSS代码定义了导航菜单的基本样式。`.menu`类设置了导航菜单的列表样式，`.menu-item`类设置了列表项的样式，包括内边距、背景色和过渡效果。`.menu-item a`类设置了链接的样式，包括文字装饰和颜色。`.menu-item:hover`类定义了鼠标经过时的样式。

3. 添加JavaScript事件处理

最后，要实现当鼠标经过导航菜单时背景高亮的效果，我们需要添加一些JavaScript事件处理。这里我们使用jQuery库来简化操作。

首先，我们需要在HTML文档中引入jQuery库的脚本文件。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后，在一个`<script>`标签中，我们可以使用以下代码来实现效果：

$(document).ready(function() {
  $('.menu-item').hover(function() {
    $(this).toggleClass('highlight');
  });
});

这段代码使用`hover()`方法来添加鼠标悬停事件的处理函数。当鼠标悬停在导航菜单的列表项上时，该函数会在对应的列表项上切换一个名为`highlight`的类。这个类定义了鼠标悬停时的背景高亮样式。

现在，当你将鼠标悬停在导航菜单的列表项上时，你应该能够看到背景色会改变的效果了。

总结：

通过使用div+CSS，我们可以很容易地实现鼠标经过背景高亮的导航菜单效果。首先，我们创建了导航菜单的HTML结构，并为列表项添加了类名。然后，我们使用CSS样式来定义导航菜单的外观和行为，包括背景色和过渡效果。最后，我们使用JavaScript添加事件处理，使得鼠标悬停在导航菜单上时出现背景高亮效果。这样做可以提高用户体验，使得用户在使用网页时更加方便和舒适。