Udemy克隆项目技术咨询：如何通过onmouseover修改列表及实现分类下拉菜单

嘿，我来帮你搞定这两个Udemy克隆里的问题！下面分别给你拆解实现思路和代码示例：

一、通过onmouseover事件修改列表内容 #

其实实现起来很简单，核心就是给列表项绑定鼠标悬停事件，然后动态修改它的文本内容。这里分两种场景给你示例：

1. 静态列表（固定数量的列表项） #

先写好HTML结构，然后用原生JavaScript绑定事件：

<!-- HTML 结构 -->
<ul id="courseList">
  <li class="course-item">Python入门课程</li>
  <li class="course-item">Web前端开发</li>
  <li class="course-item">数据可视化实战</li>
</ul>

// JavaScript 逻辑
const courseItems = document.querySelectorAll('.course-item');

courseItems.forEach(item => {
  // 鼠标悬停时修改内容
  item.addEventListener('mouseover', function() {
    // 先保存原始文本，方便鼠标移出时恢复（可选）
    if (!this.dataset.originalText) {
      this.dataset.originalText = this.textContent;
    }
    // 修改成你想要的内容，比如添加提示
    this.textContent = `${this.dataset.originalText} → 点击查看详情`;
  });

  // 可选：鼠标移出时恢复原始内容
  item.addEventListener('mouseout', function() {
    this.textContent = this.dataset.originalText;
  });
});

2. 动态列表（后续会新增列表项） #

如果你的列表是动态生成的（比如从接口加载课程），用事件委托更高效，不用每次新增元素都重新绑定事件：

const courseList = document.getElementById('courseList');

// 绑定事件到父元素ul上
courseList.addEventListener('mouseover', function(e) {
  // 确保触发事件的是列表项
  if (e.target.classList.contains('course-item')) {
    const targetItem = e.target;
    if (!targetItem.dataset.originalText) {
      targetItem.dataset.originalText = targetItem.textContent;
    }
    targetItem.textContent = `${targetItem.dataset.originalText} → 热门推荐`;
  }
});

二、实现Udemy风格的分类栏下拉菜单 #

Udemy的下拉菜单核心是「鼠标悬停分类时展开下拉面板，移开后隐藏」，同时要保证交互流畅。这里分HTML、CSS、JS三部分实现：

1. HTML 结构 #

先搭建分类导航和下拉菜单的骨架：

<nav class="category-nav">
  <div class="category-item">
    <button class="category-trigger">开发</button>
    <div class="dropdown-menu">
      <ul>
        <li><a href="#">Web开发</a></li>
        <li><a href="#">移动开发</a></li>
        <li><a href="#">数据科学</a></li>
      </ul>
    </div>
  </div>
  <div class="category-item">
    <button class="category-trigger">商务</button>
    <div class="dropdown-menu">
      <ul>
        <li><a href="#">创业管理</a></li>
        <li><a href="#">数字营销</a></li>
        <li><a href="#">领导力</a></li>
      </ul>
    </div>
  </div>
  <div class="category-item">
    <button class="category-trigger">设计</button>
    <div class="dropdown-menu">
      <ul>
        <li><a href="#">UI/UX设计</a></li>
        <li><a href="#">平面设计</a></li>
      </ul>
    </div>
  </div>
</nav>

2. CSS 样式 #

用CSS控制下拉菜单的隐藏/显示和布局，还原Udemy的视觉风格：

/* 导航栏整体样式 */
.category-nav {
  display: flex;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 0 24px;
  align-items: center;
}

/* 单个分类项 */
.category-item {
  position: relative; /* 让下拉菜单相对于此元素定位 */
  margin-right: 20px;
}

/* 分类触发按钮 */
.category-trigger {
  border: none;
  background: transparent;
  padding: 16px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #1c1d1f;
}

/* 下拉菜单默认隐藏 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  min-width: 220px;
  padding: 8px 0;
  display: none;
  z-index: 1000; /* 确保菜单在其他元素上方 */
}

/* 鼠标悬停分类项时显示下拉菜单 */
.category-item:hover .dropdown-menu {
  display: block;
}

/* 下拉菜单列表样式 */
.dropdown-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-menu li {
  padding: 8px 16px;
}

.dropdown-menu a {
  text-decoration: none;
  color: #1c1d1f;
  display: block;
  font-size: 14px;
}

/* 列表项悬停高亮 */
.dropdown-menu li:hover {
  background-color: #f7f9fa;
}

3. 增强版JS交互（可选） #

如果想让菜单交互更流畅（比如防止鼠标从分类按钮移到菜单时立刻隐藏），可以加个延迟逻辑：

const categoryItems = document.querySelectorAll('.category-item');

categoryItems.forEach(item => {
  const dropdown = item.querySelector('.dropdown-menu');
  let hideTimeout;

  // 鼠标进入分类项时，清除延迟并显示菜单
  item.addEventListener('mouseenter', () => {
    clearTimeout(hideTimeout);
    dropdown.style.display = 'block';
  });

  // 鼠标离开分类项时，延迟200ms隐藏菜单
  item.addEventListener('mouseleave', () => {
    hideTimeout = setTimeout(() => {
      dropdown.style.display = 'none';
    }, 200);
  });

  // 鼠标进入菜单时，清除延迟保持显示
  dropdown.addEventListener('mouseenter', () => {
    clearTimeout(hideTimeout);
  });

  // 鼠标离开菜单时直接隐藏
  dropdown.addEventListener('mouseleave', () => {
    dropdown.style.display = 'none';
  });
});

这样实现的下拉菜单就和Udemy的交互体验基本一致了~

内容的提问来源于stack exchange，提问作者mr coder