鼠标移入移出效果 -- jQuery/Vue版

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

原文链接

实现思路

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

jQuery版

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

html

    

        

            
mouse hover
        
    

    

        

            
mouse hover
        
    

    

        

            
mouse hover
        
    

    

        

            
mouse hover
        
    

    

        

            
mouse hover
        
    
    

        

            
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);
}

js

Vue版

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

html

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

css

js

效果