Vue.js鼠标悬浮更换图片
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样:
这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现。
首先将所有的选中后图片都覆盖到没选中图片上
html代码如下
<ul>
<li>
<a href="">
<img src="../../../img/goods/study.png" alt="学习">
<img class="hide_tab" src="../../../img/goods/study_1.png" alt="学习">
</a>
</li>
<li>
<a href="">
<img src="../../../img/goods/life.png" alt="生活">
<img class="hide_tab" src="../../../img/goods/life_1.png" alt="生活">
</a>
</li>
<li>
<a href="" >
<img src="../../../img/goods/sport.png" alt="运动">
<img class="hide_tab" src="../../../img/goods/sport_1.png" alt="运动">
</a>
</li>
<li>
<a href="">
<img src=