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

    在设计响应式布局时，我们经常会根据屏幕的大小来调整样式已适应不同窗口大小的所带来的不同视觉效果，比如说我们常见的导航栏设计，当我们在点击对应的标题时让其背景色切换成深绿色，这样在视觉上更用户能第一眼就能知道自己正点击在哪个选项上了，而在样式上，通常我们会在PC端时显示到顶部位置，而换到移动端时则显示到左边来，如下图所示：

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

#HTML
<div class="menu">
    <i class="fa fa-align-justify" @click="open" ></i>
    <ul v-if="flag">
      <li v-for="(menu,index) in menus" :key="index" >{{menu}}</li>
    </ul>
</div>
#css
.menu ul{
  overflow: hidden;
  white-space: nowrap;
}
.menu ul li {
  display: inline-block;
  font-size: 1.1rem;
  padding: 0 20px;
  color: #fff;
  line-height: 50px;
  cursor: pointer;
}
.menu ul li:hover{
  background-color: #045f56;
} 

使用Chrome浏览器模拟移动端屏幕测试点击效果，通过response菜单我们可以随意的变化浏览窗口大小来模拟不同屏幕大小进行测试，这里我们可以可以看到同样可以实现该点击效果，所以:hover实现起来还是相当的简单方便快捷。

修改下我们的配置，打开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事件，该方法无效，这里我验证是可行的哦）。

 如果你还是不放心，那么就用Vue提供的@click事件来实现吧，虽然相对麻烦点，但是一样可以实现相同的效果，这里我们需要设定一个active样式，然后通过click点击事件来切换当前选项的active样式,定义一个空的id，点击时把index附上，将index赋值给id，这样就可以触发绑定样式了。

#HTML
<div class="menu">
  <i class="fa fa-align-justify" @click="open" ></i>
  <ul v-if="flag">
    <li v-for="(menu,index) in menus" :key="index" 
    @click="chiose(index)" :class="{'active':id===index}">{{menu}}</li>
  </ul>
</div>
#CSS
.active{
  background-color: #045f56;
} 
#SCRIPT
 chiose(index){
    this.id=index   
},

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

 

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