vue鼠标划过显示二级菜单并切换icon

如图,鼠标滑过显示二级菜单和图标 滑出隐藏显示

通过动态添加类实现

 

<ul>

  <li @mouseover="addClass(1)" @mouseout="addClass(4)">
    //要显示的部分
    <a>
     狗狗
     <em :class="{ up: isIcon === 1}"></em>
    </a>
    //切换隐藏显示的部分
   <div :class="{ active: isActive === 1}" style="display: none">
   </div>
  </li>



  <li @mouseover="addClass(2)" @mouseout="addClass(5)">
   //显示的部分
    <a>
     猫咪
     <em :class="{ up: isIcon === 2}"></em>
    </a>
   //切换隐藏显示的部分
   <div :class="{ active: isActive === 2}" style="display: none">
   </div>
  </li>



</ul>
data() {
    return {
         isActive: 0,
         isIcon:0
           }
       }
methods:{
  addClass(i) {
            this.isActive = i;
            this.isIcon=i;
              }
        }

css样式:

<style scoped>

 .active {
    display: block !important;
}
 .up{
    background-position: -143px -9px;
}

 em{
    background: url(../img/icon.png) no-repeat -143px 0;
}

</style>

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值