鼠标移入移出效果

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

原文链接

实现思路

1、根据鼠标的位置定位在元素内出现的方向
2、根据方向动态设置遮罩层样式
3、设置动画移动遮罩层

jQuery版

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

html

mouse hover

css

.container {    width: 600px;    margin: auto;    margin-top: 100px;
}.content {    float: left;    position: relative;    height: 150px;    width: 150px;    margin: 20px;    overflow: hidden;    background: #ccc;
}.content .shade {    position: absolute;    top: 0;    display: none;    width: 100%;    height: 100%;    line-height: 100px;    color: #fff;    background: rgba(0, 0, 0, 0.7);
}

Vue版

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

html

        
                mouse hover
        
        
                mouse hover
        
        
                mouse hover
        
        
                mouse hover
        
        
                mouse hover
        
        
                mouse hover

css


        html,        body {                text-align: center;                color: #000;                background-color: #353535;
        }

        * {                box-sizing: border-box;
        }        #app {                width: 600px;                margin: auto;                margin-top: 100px;
        }        .content {                float: left;                position: relative;                height: 150px;                width: 150px;                margin: 20px;                overflow: hidden;                background: #ccc;
        }        .content .shade {                position: absolute;                top: 0;                left: -100%;                width: 100%;                height: 100%;                line-height: 100px;                color: #fff;                background: rgba(0, 0, 0, 0.7);
        }

效果

image

作者：bestvist
链接：https://www.jianshu.com/p/f61505c3c09b

鼠标移入移出效果

Vue.js相关栏目本月热门文章