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

最新推荐文章于 2025-04-01 11:43:45 发布

bestvist

最新推荐文章于 2025-04-01 11:43:45 发布

阅读量1k

点赞数

分类专栏： javascript jquery vue 文章标签： jquery vue mouse

本文链接：https://blog.youkuaiyun.com/qq_38082661/article/details/80797566

版权

本文介绍了如何使用jQuery和Vue实现元素内遮罩层根据鼠标方向显示的效果，包括实现思路、HTML、CSS和JS代码示例，以及最终效果的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

原文地址

git地址

实现思路

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

jQuery版

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

html

<div class="container">
    <div class="content" style="background:aqua">
        <div class="shade">
            <p>mouse hover</p>
        </div>
    </div>

    <div class="content" style="background:bisque">
        <div class="shade">
            <p>mouse hover</p>
        </div>
    </div>

    <div class="content" style="background:cadetblue">
        <div class="shade">
            <p>mouse hover</p>
        </div>
    </div>

    <div class="content" style="background:chocolate">
        <div class="shade">
            <p>mouse hover</p>
        </div>
    </div>

    <div class="content" style="background:cornflowerblue">
        <div class="shade">
            <p>mouse hover</p>
        </div>
    </div>
    <div class="content" style="background:darkkhaki">
        <div class="shade">
            <p>mouse hover</p>
        </div>
    </div>
</div>

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

<script>
    (function ($) {
    
        $.fn.extend({

最低0.47元/天解锁文章