VUE跟随鼠标悬浮框效果示例

VUE跟随鼠标悬浮效果示例

功能要求：

1.鼠标悬浮到某一图片logo位置，出现悬浮框显示此logo对应的企业主体基本信息

2.悬浮框跟随鼠标的位置出现

效果图如下：

分析页面结构：

1.logo图片部分用ul li 循环结构

2.悬浮框部分单独写一个div，用position absolute定位

分析功能实现：

1. @mouseenter @mouseleave 控制悬浮框的显示隐藏

2.@mousemove 控制悬浮框出现的位置

代码实现：

1. template 部分

<ul class="netimage">
   <li  v-for="(item,index) in data_content" 
   		:key="index"