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

最新推荐文章于 2024-04-25 15:57:52 发布

原创最新推荐文章于 2024-04-25 15:57:52 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何利用JavaScript事件监听和动态添加类的方法，实现在鼠标滑过时显示二级菜单，离开时隐藏的效果。示例代码中展示了针对‘狗狗’和‘猫咪’两个选项的交互实现，通过修改元素的class属性来切换显示隐藏状态。

部署运行你感兴趣的模型镜像

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

通过动态添加类实现

<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>

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率