admin 管理员组

文章数量: 1087678

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>

本文标签： vue鼠标划过显示二级菜单并切换icon

版权声明：本文标题：vue鼠标划过显示二级菜单并切换icon 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700276702a376128.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。