vue鼠标悬浮菜单,vue 鼠标悬停
这篇文章主要为大家详细介绍了某视频剪辑软件实现鼠标经过显示悬浮框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现鼠标经过显示悬浮框效果的具体代码，供大家参考，具体内容如下
项目架构采用vue-cli脚手架搭建的webpack项目
实现的效果如下：
鼠标经过按钮右边显示出一个悬浮框鼠标移出buttom元素悬浮框隐藏并且悬浮框可以随着鼠标的移动而改变位置
全部代码如下：
模板
你好
div id= focus _ toolTip class= special _ focus _ toolTip v-html= toolTopbody /div
按钮
class=buttonStyle
@ mousemove= item mousemove($ event)
@mouseover=itemMouseover
@mouseout=itemMouseout
悬浮框测试/按钮
/div
/模板
脚本
从" jquery "导入$ s；
导出默认值{
名称：“HelloWorld”，
data() {
返回{
toolTopbody:" "
};
},
方法：{
itemMouseover: function() {
var focusTooltip=$( # focus _ toolTip )；
focusTooltip.css(display ， block )；
},
itemMouseout: function() {
var focusTooltip=$( # focus _ toolTip )；
focusTooltip.css(display ， none )；
},
itemMousemove:函数(e) {
var self=this
var focusTooltip=$( # focus _ toolTip )；
focusTooltip.css(top ，e . clienty-80 px )；
focusTooltip.css(left ，e . clientx 100 px )；
var headerHtml=
div style= font-size:12px；颜色：# fec443字体粗细：粗体；字体系列：微软雅黑；
我的悬浮框参考：
/div ；
var effectHtml=
div style= font-size:12px；边距-顶部：5px /div ；
自我。tooltopbody=header html effect html；
}
}
};
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围。按钮样式{
左边距：150像素
}。特殊_焦点_工具提示{
z指数：7;
位置：绝对；
显示：无；
宽度：400像素
高度：130像素
边框样式：纯色；
过渡：左0.4s三次贝塞尔(0.23,1,0.32,1),
顶级0.4s三次-贝塞尔(0.23,1,0.32,1);
背景色：rgba(50，50，50，0.701961)；
边框宽度：0px
边框颜色：# 333333;
边框-半径：4px
颜色：# ffffff
字体样式：正常；
字体变体：正常；
字体粗细：正常；
字体拉伸：正常；
字体大小：14px
字体系列：微软雅黑；
行高：21px
填充：10px 10px
}
/风格
主要实现思路：
首先展示的悬浮框是绝对定位并且一开始是隐藏的显示：无，触发鼠标悬停事情的时候把元素展示出来focusTooltip.css("display "，" block ")；触发itemMouseout事件的时候把它隐藏掉focusTooltip.css("display "，" none ")；然后当鼠标指针在指定的元素中移动时，就会发生鼠标移动事件，这个时候通过事件对象拿到鼠标的位置(备注：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态),然后稍微调整下位置，最后给悬浮框的差异元素设置顶端和左边的属性，其实悬浮框是基于超文本标记语言定位的他的父元素没有相对定位位置：相对；不然会影响到顶端和左边的的属性，因为绝对的会基于父元素亲戚进行定位。鼠标事件整体触发的顺序为鼠标滑过鼠标移动鼠标离开最后悬浮框里面的内容会根据虚拟超文本标记语言对应的内容渲染（这块展示的内容由自己定义)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。