vue实战开发014:响应式布局中的hover事件

1、处理当前的点击样式 ，最简单的方法就是直接使用:hover事件来实现该方法，我们给li标签添加:hover样式并给其添加背景色，这样当我们将鼠标点击到对应的标题上时就可以实现背景选中效果。

3、修改下我们的配置，打开package.json文件，将本机IP地址添加到serve后面（这里我的IP是192.168.31.224）："serve": "vue-cli-service serve--192.168.31.224"，然后用手机链接WIFI保证在同一网络，访问192.168.31.224:8080即可查看当前项目，这里测试了好几遍效果一样可行（网上有人说移动端没有:hover事件，该方法无效，这里我验证是可行的哦）。

5、问题来了：这里hover() 方法是当鼠标指针悬停在被选元素上时执行样式修改（:hover 选择器可用于所有元素），也就是说鼠标放上去就应该改变了样式才对，这里为啥是点击之后才生效呢（按理说移动设备是没有鼠标的，只能通过手指和网页直接接触，自然也就不存在悬浮事件了，那么现在是什么状况）。

6、经过反复的测试，原来hover() 方法在PC端显示时的确是鼠标悬停事件，只要鼠标移到哪里状态就切换到哪里，而当我们切换到移动端时，移动设备是没有鼠标事件，所以此时的hover() 方法竟然成了点击事件，手指点击相应的选项状态随着切换，这个不错，下面是手机端的现实效果。