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

本次实现的是给三级联动添加背景颜色。即如下图般的效果。

修改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样式即可。
如下图所示

项目笔记8（尚品汇）相关推荐

电商项目尚品汇学习笔记
本文参考其他文章自己整理补充的,要阅读原文请查看:尚品汇项目笔记_爱哭的毛毛虫的博客-CSDN博客_尚品汇项目 1.vue文件目录 public文件夹:静态资源,webpack进行打包的时候会原封不动 ...
尚品汇项目笔记（持续更新中）
项目网络教学视频链接:尚硅谷VUE项目实战,前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili 目录一. 使用vue-cli脚手架去初始化项目二.项目的其他配置三.项目路由分析四.创建 ...
尚硅谷尚品汇_后台管理项目
vueProject_尚品汇后台管理项目源码文章目录 vueProject_尚品汇后台管理 login/out模块 product模块 login/out模块 .env.development . ...
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
文章目录最好使用视频上的账号密码,13700000000 密:111111 最新服务端接口地址:http://gmall-h5-api.atguigu.cn 脚手架使用 1.创建项目 2.脚手架默认 ...
vue尚品汇商城项目-day07【vue插件-49.（了解）自定义插件】
文章目录 49.(了解)自定义插件本人其他相关文章链接 49.(了解)自定义插件自定义插件好处: 功能:用于增强Vue 本质:包含install方法的一个对象,install的第一个参数是Vue, ...
vue尚品汇商城项目-day00【项目介绍：此项目是基于vue2的前台电商项目和后台管理系统】
文章目录本人其他相关文章链接项目介绍:此项目是基于vue2的前台电商项目和后台管理系统此项目为在线电商Web App (SPA) 包括首页, 搜索列表, 商品详情, 购物车, 订单, 支付, 用 ...
尚硅谷 VUE 尚品汇项目实战问题解决方式整理(Vue3 版)
教学视频:https://www.bilibili.com/video/BV1Vf4y1T7bw 不回要资料的评论,资料在视频底下评论有些仓库里面有. 试图自行解决问题也是程序员必备技能之一,多做尝试 ...
vue尚品汇商城项目-day04【29.加入购物车操作（难点）】
文章目录 29.加入购物车操作(难点) 29.1加入购物车按钮 29.2addCartSuce 29.3购物车 29.3.1 向服务器发送ajax请求,获取购物车数据 29.3.2UUID临时游客身份 ...
Vue前端项目【尚品汇】
Vue前端项目[尚品汇] 1. 说明 2. 对项目创建 3.结构 4. 项目运行起来时,浏览器自动打开 5.关闭ESLint校验功能 5.路由分析 6.路由元信息 7. 路由传参 7.1 路由的跳转方 ...
尚品汇后台管理项目（Vue）
简介 1:什么是后台管理系统项目? 注意:前端领域当中,开发后台管理系统项目,并非是java.php等后台语言项目. 在前面课程当中,我们已经开发了一个项目[尚品汇电商平台项目],这个项目主要针对的是 ...

项目笔记8（尚品汇）

文章目录