本文旨在提供一种使用纯 JavaScript 实现鼠标悬停效果，并保持该效果直到另一个元素被悬停的方法。通过监听 mouseover 事件，并动态添加和移除 CSS 类，实现菜单项的突出显示效果，确保只有一个菜单项处于激活状态。
实现原理
核心思路是利用 JavaScript 监听每个菜单项的 mouseover 事件。当一个菜单项被悬停时，首先移除所有菜单项的 hover 类，然后仅为当前悬停的菜单项添加 hover 类。这样，就能保证只有一个菜单项拥有 hover 类，从而实现高亮显示当前悬停项的效果。
具体步骤
获取所有菜单项元素
首先，需要获取所有具有 menu-item 类的元素。document.getElementsByClassName 方法返回一个 HTMLCollection，我们需要将其转换为数组，以便使用 forEach 方法进行迭代。可以使用扩展运算符 … 来完成转换。
立即学习“Java免费学习笔记（深入）”；
const menuItems = [...document.getElementsByClassName('menu-item')];
为每个菜单项添加 mouseover 事件监听器
使用 forEach 方法遍历 menuItems 数组，为每个菜单项添加 mouseover 事件监听器。
menuItems.forEach(item => item.addEventListener('mouseover', () => { // 处理鼠标悬停事件}));
在 mouseover 事件处理函数中移除和添加 hover 类
在 mouseover 事件处理函数中，首先遍历整个 menuItems 数组，移除所有菜单项的 hover 类。然后，为当前悬停的菜单项添加 hover 类。
menuItems.forEach(item => item.addEventListener('mouseover', () => { menuItems.forEach(item => item.classList.remove('hover')); item.classList.add('hover');}));
完整代码示例
以下是完整的 HTML、CSS 和 JavaScript 代码示例：
JavaScript Hover Effect #menu {background-color: #0066cc; padding: 15px; width: 100%;} .menu-item {height: 25px; width: fit-content; color: white; cursor: pointer; font-family: sans-serif;transition: margin-left .2s;} .menu-item.hover {margin-left: 15px;} const menuItems = [...document.getElementsByClassName('menu-item')]; menuItems.forEach(item => item.addEventListener('mouseover', () => { menuItems.forEach(item => item.classList.remove('hover')); item.classList.add('hover'); }));
代码解释
HTML: 定义了一个包含多个 menu-item 类的 div 元素，模拟菜单结构。CSS: 定义了 menu-item 类的样式，包括颜色、字体等。menu-item.hover 类定义了鼠标悬停时的样式，这里使用了 margin-left 来实现一个简单的位移动画效果。transition属性用于使位移变化更平滑。JavaScript: 实现了上述的逻辑，获取所有 menu-item 元素，并为每个元素添加 mouseover 事件监听器，动态添加和移除 hover 类。
注意事项
确保 CSS 中定义了 hover 类的样式，以便在鼠标悬停时产生视觉效果。如果菜单项是动态生成的，需要在生成菜单项后重新执行 JavaScript 代码，以便为新生成的菜单项添加事件监听器。该方法适用于简单的菜单效果。对于更复杂的交互，可能需要使用更高级的技术，如事件委托或状态管理。
总结
通过本文，你学习了如何使用纯 JavaScript 实现鼠标悬停保持效果，并保持该效果直到另一个元素被悬停。这种方法简单易懂，适用于大多数简单的菜单场景。通过灵活运用 CSS 和 JavaScript，可以创建出更加丰富和交互性强的用户界面。
以上就是JavaScript 实现鼠标悬停保持效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1582649.html
微信扫一扫 
支付宝扫一扫 
