根据鼠标hover的方向弹出、收回遮罩层，分为jQuery和Vue版

元素内遮罩层根据鼠标方向显示的效果比较常见，比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。

>>>>

实现思路

根据鼠标的位置定位在元素内出现的方向

根据方向动态设置遮罩层样式

设置动画移动遮罩层

>>>>

jQuery版

jQuery插件可以通过$.fn.extend方法进行拓展。

html

css

js

>>>>

Vue版

通用Vue的组件实现判断元素内鼠标的位置，利用插槽的方式显示遮罩层内容。

html

css

js

>>>>

效果