一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情

三级联动动态添加背景颜色。

本次实现的是给三级联动添加背景颜色。即如下图般的效果。在这里插入图片描述

修改css样式实现

首先查阅代码，发现类名为item的div标签控制三级标签的展示。如下图所示。因此如果通过css实现上述功能只需要给item设置hover即可。如下图所示。在这里插入图片描述

通过JS实现功能

实现思路

通过js实现功能的思路如下，给每个一级标签绑定一个鼠标进入的事件，当鼠标进入后，获取鼠标所在标签的索引值，通过索引值给标签添加背景。具体实现过程如下首先定义data中的currentIndex这个数据用来代表鼠标所在位置的索引值。由于刚进入页面不需要给一级标签添加背景色，因此默认currentIndex为-1。接下来设置一个新的cur类（用以改变背景色）。随后为一级标签所在的h3标签添加鼠标进入事件即@mouseenter。当鼠标进入时获取所在标签的索引值，并通过索引判断是否应该添加cur类。在设置完后，此时当鼠标放在一级标签时，背景色就添加完毕了，但是此时鼠标移出背景色还在，因此需要在设置一个鼠标移出事件。鼠标移出事件较为特殊，为了使用户体验得到更好的提升，通过事件委派让鼠标移出的范围扩大一些。具体流程为，首先将三级组件所在的div与h2标签同时放入一个新的div盒子中，将鼠标移出事件绑定在这个新盒子中即可。具体代码以及过程图如下所示。