如何为条件下拉菜单添加hover（悬停）触发效果

没问题！要把下拉菜单的触发从点击改成悬停，得先说明：原生的<select>元素受浏览器默认行为限制，没法直接通过hover事件展开选项列表，所以我们需要用自定义的下拉组件来替代原生select，同时保留原有的选项联动逻辑。下面是完整的实现方案：

核心思路 #

• 用<div>模拟下拉菜单的触发区域和选项列表
• 通过CSS的:hover伪类控制选项列表的显示/隐藏
• 复用原有的联动逻辑，调整为操作自定义下拉的选项元素

完整实现代码 #

HTML结构（替换原生select） #

<!-- 第一个下拉：选择国家 -->
<div class="custom-dropdown">
  <div class="dropdown-trigger" id="countryTrigger">Pick a Country</div>
  <ul class="dropdown-options" id="countryOptions">
    <li data-text="Pick a Country">Pick a Country</li>
    <li data-text="India">India</li>
    <li data-text="Sri Lanka">Sri Lanka</li>
    <li data-text="Sweden">Sweden</li>
  </ul>
</div>

<!-- 第二个下拉：选择目的地 -->
<div class="custom-dropdown">
  <div class="dropdown-trigger" id="destinationTrigger">Pick a Destination</div>
  <ul class="dropdown-options" id="destinationOptions">
    <li data-text="Pick a Destination">Pick a Destination</li>
    <li data-text="Bangalore" class="hidden">Bangalore</li>
    <li data-text="Delhi" class="hidden">Delhi</li>
    <li data-text="Gujarat" class="hidden">Gujarat</li>
    <li data-text="Kerala" class="hidden">Kerala</li>
    <li data-text="Kutch Desert" class="hidden">Kutch Desert</li>
    <li data-text="South Kerala" class="hidden">South Kerala</li>
    <li data-text="Tamil Nadu Forests" class="hidden">Tamil Nadu Forests</li>
    <li data-text="Mysore" class="hidden">Mysore</li>
    <li data-text="Sri Lanka" class="hidden">Sri Lanka</li>
    <li data-text="Sweden" class="hidden">Sweden</li>
  </ul>
</div>

CSS样式（实现hover触发） #

/* 自定义下拉容器 */
.custom-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}

/* 下拉触发区域样式，模拟原生select外观 */
.dropdown-trigger {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  min-width: 150px;
  display: inline-block;
}

/* 选项列表默认隐藏 */
.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: white;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

/* 悬停触发区域时显示选项列表 */
.custom-dropdown:hover .dropdown-options {
  display: block;
}

/* 选项样式 */
.dropdown-options li {
  padding: 5px 10px;
  cursor: pointer;
}

.dropdown-options li:hover {
  background-color: #f0f0f0;
}

/* 隐藏类 */
.hidden {
  display: none !important;
}

JavaScript逻辑（保持联动功能） #

document.addEventListener('DOMContentLoaded', function() {
  const countryTrigger = document.getElementById('countryTrigger');
  const countryOptions = document.getElementById('countryOptions').querySelectorAll('li');
  const destinationOptions = document.getElementById('destinationOptions').querySelectorAll('li');

  // 绑定国家选项的点击事件，更新触发文本并联动目的地
  countryOptions.forEach(option => {
    option.addEventListener('click', function() {
      const selectedText = this.getAttribute('data-text');
      countryTrigger.textContent = selectedText;
      updateDestinationOptions(selectedText);
    });
  });

  // 目的地选项点击事件，更新触发文本
  destinationOptions.forEach(option => {
    option.addEventListener('click', function() {
      const selectedText = this.getAttribute('data-text');
      document.getElementById('destinationTrigger').textContent = selectedText;
      // 原代码中的跳转逻辑可以放在这里：location = this.value;（如果需要给选项加value属性）
    });
  });

  // 联动更新目的地选项的显示/隐藏
  function updateDestinationOptions(selectedCountry) {
    // 先隐藏所有目的地选项（除了默认的Pick a Destination）
    destinationOptions.forEach(option => {
      if (option.getAttribute('data-text') === 'Pick a Destination') {
        option.style.display = 'block';
      } else {
        option.style.display = 'none';
      }
    });

    // 根据选中的国家显示对应目的地
    switch(selectedCountry) {
      case 'India':
        ['Bangalore', 'Delhi', 'Gujarat', 'Kerala', 'Kutch Desert', 'South Kerala', 'Tamil Nadu Forests', 'Mysore'].forEach(text => {
          const targetOption = Array.from(destinationOptions).find(opt => opt.getAttribute('data-text') === text);
          if (targetOption) targetOption.style.display = 'block';
        });
        break;
      case 'Sri Lanka':
        const slOption = Array.from(destinationOptions).find(opt => opt.getAttribute('data-text') === 'Sri Lanka');
        if (slOption) slOption.style.display = 'block';
        break;
      case 'Sweden':
        const swOption = Array.from(destinationOptions).find(opt => opt.getAttribute('data-text') === 'Sweden');
        if (swOption) swOption.style.display = 'block';
        break;
      case 'Pick a Country':
        // 只保留默认选项
        break;
    }
  }
});

关键改动说明 #

1. 替换原生select：用div+ul/li模拟下拉组件，这样才能通过CSS的:hover控制选项列表的显示
2. hover触发逻辑：通过.custom-dropdown:hover .dropdown-options实现悬停展开选项
3. 联动逻辑适配：修改JavaScript来操作自定义的选项元素，保留原有的国家-目的地联动规则
4. 交互体验优化：添加选项hover高亮，模拟原生select的交互感

内容的提问来源于stack exchange，提问作者Keerthi Kamarthi