如何实现hover显示div，点击后隐藏且不影响后续hover功能？

核心原因分析 #

直接设置display: none会给元素添加行内样式，其优先级高于CSS中定义的hover状态样式，导致后续鼠标hover时，CSS的display: block无法覆盖行内的display: none，从而失效。

方案一：用类切换替代直接修改display属性 #

这种方法不破坏原有CSS的hover逻辑，通过类来控制显示状态：

1. 调整CSS样式，新增一个控制显示的类：

/* 保留原有的hover触发逻辑 */
.dropdown:hover .dropdown-content_Mouse {
  display: block;
}
/* 新增类，和hover逻辑同优先级 */
.dropdown.show .dropdown-content_Mouse {
  display: block;
}

2. 修改点击事件函数，移除控制类并模拟鼠标移出：

function foo() {
  // 这里写你的原有业务逻辑
  // 获取下拉菜单容器
  const dropdown = document.querySelector('.dropdown');
  // 移除显示类
  dropdown.classList.remove('show');
  // 可选：手动触发mouseleave事件，确保hover状态完全失效
  dropdown.dispatchEvent(new MouseEvent('mouseleave'));
}

方案二：直接触发鼠标移出事件（无需修改CSS） #

如果不想改动原有CSS，可以直接通过JS触发容器的mouseleave事件，模拟鼠标移出的行为，让CSS的hover状态自然失效：

function foo() {
  // 你的业务逻辑代码
  // 找到下拉内容对应的父容器
  const dropdownContent = document.querySelector('.dropdown-content_Mouse');
  const dropdown = dropdownContent.closest('.dropdown');
  // 触发mouseleave事件，菜单会按照CSS的hover规则隐藏
  dropdown.dispatchEvent(new MouseEvent('mouseleave'));
}

这两种方法都不会修改元素的行内display属性，因此后续的hover逻辑依然能正常触发，完美解决你的问题。

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