本文详细介绍了如何通过CSS和JavaScript为三级联动菜单实现背景颜色的动态变化。CSS主要负责基础样式，而JavaScript则通过事件处理来控制背景色的添加与移除，包括鼠标移入和移出时的处理。此外，还涵盖了二级、三级分类的显示与隐藏技巧。
三级联动动态添加背景颜色。
本次实现的是给三级联动添加背景颜色。即如下图般的效果。
修改css样式实现
首先查阅代码，发现类名为item的div标签控制三级标签的展示。如下图所示。因此如果通过css实现上述功能只需要给item设置hover即可。如下图所示。
通过JS实现功能
实现思路
通过js实现功能的思路如下，给每个一级标签绑定一个鼠标进入的事件，当鼠标进入后，获取鼠标所在标签的索引值，通过索引值给标签添加背景。具体实现过程如下
首先定义data中的currentIndex这个数据用来代表鼠标所在位置的索引值。由于刚进入页面不需要给一级标签添加背景色，因此默认currentIndex为-1。接下来设置一个新的cur类（用以改变背景色）。随后为一级标签所在的h3标签添加鼠标进入事件即@mouseenter。当鼠标进入时获取所在标签的索引值，并通过索引判断是否应该添加cur类。在设置完后，此时当鼠标放在一级标签时，背景色就添加完毕了，但是此时鼠标移出背景色还在，因此需要在设置一个鼠标移出事件。
鼠标移出事件较为特殊，为了使用户体验得到更好的提升，通过事件委派让鼠标移出的范围扩大一些。
具体流程为，首先将三级组件所在的div与h2标签同时放入一个新的div盒子中，将鼠标移出事件绑定在这个新盒子中即可。具体代码以及过程图如下所示。
鼠标移入步骤图
鼠标移出步骤图
二三级分类显示与隐藏实现方法
首先展示一下应有的效果
CSS实现
利用css实现的原理时当鼠标放在一级标题处，二三级标题将默认的display:none改为display:block,如下图所示。
JS实现
JS实现只需要动态绑定style样式即可。
如下图所示
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
