最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片，大致实现出来的效果就是这样：
这个在jQuery中是个很简单的事，但是在vue中我还是第一次实现。
首先将所有的选中后图片都覆盖到没选中图片上
html代码如下
<ul> <li> <a href=""> <img src="" alt="学习"> <img src="" alt="学习"> </a> </li> <li> <a href=""> <img src="" alt="生活"> <img src="" alt="生活"> </a> </li> <li> <a href="" > <img src="" alt="运动"> <img src="" alt="运动"> </a> </li> <li> <a href=""> <img src="" alt="服饰"> <img src="" alt="服饰"> </a> </li> <li> <a href="" > <img src="" alt="鞋帽"> <imgclass="hide_tab" src="" alt="鞋帽"> </a> </li> <li> <a href="" > <img src="" alt="食品"> <img src="" alt="食品"> </a> </li> <li> <a href=""> <img src="" alt="其他"> <img src="" alt="其他"> </a> </li> </ul>
css代码如下
.right { float: left; ul { margin-left: 1px; li { display: inline-block; margin-left: 12px; width: 100px; height: 100px; a{ position: relative; display: inline-block; width: 100px; height: 100px; .hide_tab{ position: absolute; bottom: 0; } } } } }
其实就是很简单的通过position:absolute进行了布局，现在选中样式的图片已经全部覆盖到了没有选中样式图片之上了。
接下来就需要一个变量控制他们的显隐。这个变量应该是一个和每个分类一一对应的，那这个变量就不应该是一个简单的布尔值，而是一个数字，和每个分类图片对应。
我定义这个变量叫做active，在data中声明
data(){ return{ active: 0 } }
再定义一个方法控制active变量的变化
showActive(index) { this.active = index; }
方法中的index参数就是鼠标悬浮时传入的值
修改html代码如下
<ul> <li> <a href="" @mouseenter="showActive(1)" @mouseleave="showActive(0)"> <img src="" alt="学习"> <img v-show="active === 1" src="" alt="学习"> </a> </li> <li> <a href="" @mouseenter="showActive(2)" @mouseleave="showActive(0)"> <img src="" alt="生活"> <img v-show="active === 2" src="" alt="生活"> </a> </li> <li> <a href="" @mouseenter="showActive(3)" @mouseleave="showActive(0)"> <img src="" alt="运动"> <img v-show="active === 3" src="" alt="运动"> </a> </li> <li> <a href="" @mouseenter="showActive(4)" @mouseleave="showActive(0)"> <img src="" alt="服饰"> <img v-show="active === 4" src="" alt="服饰"> </a> </li> <li> <a href="" @mouseenter="showActive(5)" @mouseleave="showActive(0)"> <img src="" alt="鞋帽"> <img v-show="active === 5" src="" alt="鞋帽"> </a> </li> <li> <a href="" @mouseenter="showActive(6)" @mouseleave="showActive(0)"> <img src="" alt="食品"> <img v-show="active === 6" src="" alt="食品"> </a> </li> <li> <a href="" @mouseenter="showActive(7)" @mouseleave="showActive(0)"> <img src="" alt="其他"> <img v-show="active === 7" src="" alt="其他"> </a> </li> </ul>
只有在当前index和active相等时，才会显示已选中分类的图片。
而鼠标离开时，传入一个没有与之对应的0，这样就没有显示了。