如何在鼠标未悬停指定菜单元素时触发事件显示bottom-menu div

嘿，我来帮你搞定这个需求！你已经实现了鼠标悬停指定菜单元素时隐藏bottom-menu的功能，现在要补全鼠标离开该菜单元素时自动显示它的逻辑对吧？其实很简单，下面给你两种常用的实现方式，按需选择就行：

方法一：纯CSS实现（最简洁） #

如果你的DOM结构允许，纯CSS就能搞定，不用写JS，性能也更好。假设你的HTML结构是这样的：

<!-- 菜单元素 -->
<div class="target-menu-item">我是要hover的菜单元素</div>
<!-- 要控制显示隐藏的bottom-menu -->
<div class="bottom-menu">我是底部菜单</div>

对应的CSS代码：

/* 默认状态下bottom-menu是显示的 */
.bottom-menu {
  display: block;
  /* 其他样式根据你的需求写 */
  padding: 10px;
  background: #eee;
}

/* 当鼠标悬停在目标菜单元素上时，隐藏bottom-menu */
.target-menu-item:hover ~ .bottom-menu {
  display: none;
}

原理很简单：CSS的~兄弟选择器会选中目标菜单元素后面的bottom-menu，当hover状态消失时，隐藏的规则自动失效，bottom-menu就会回到默认的显示状态，完美实现你要的un-hover触发显示的效果。

如果bottom-menu是目标菜单元素的子元素，把选择器改成.target-menu-item:hover .bottom-menu就行。

方法二：JavaScript实现（适合复杂逻辑） #

如果你的场景需要额外的交互逻辑（比如延迟显示、联动其他元素），用JS会更灵活。示例代码如下：

HTML结构：

<div class="target-menu-item">我是要hover的菜单元素</div>
<div class="bottom-menu" id="bottomMenu">我是底部菜单</div>

JavaScript代码：

// 获取元素
const menuItem = document.querySelector('.target-menu-item');
const bottomMenu = document.getElementById('bottomMenu');

// 鼠标进入时隐藏
menuItem.addEventListener('mouseenter', () => {
  bottomMenu.style.display = 'none';
  // 或者用类来控制（推荐，方便维护样式）
  // bottomMenu.classList.add('hidden');
});

// 鼠标离开时显示
menuItem.addEventListener('mouseleave', () => {
  bottomMenu.style.display = 'block';
  // 对应类的写法：
  // bottomMenu.classList.remove('hidden');
});

如果用类控制样式，记得在CSS里定义：

.hidden {
  display: none;
}

两种方法都能完美实现你的需求，纯CSS适合简单场景，JS适合需要扩展逻辑的情况。要是你还有具体的DOM结构或者样式问题，随时说！

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