鼠标移动上去显示弹窗，移开则关闭

最新推荐文章于 2024-08-23 17:50:13 发布

原创最新推荐文章于 2024-08-23 17:50:13 发布 · 1.8k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #开发语言

收录于

笔记专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何利用JavaScript实现鼠标移到元素上显示弹窗，移开后关闭弹窗的效果。通过示例代码详细解析HTML和JavaScript的实现过程。

1.页面效果

在这里插入图片描述

2. html代码

<span data-value="#(course.viewCount ??)" 
       onmouseout="viewOut()" onmouseover="viewCount('#(course.id ??)')"
       class="float-right viewCount-#(course.id ??)">

       <i class="bi bi-eye"></i>
       #(course.learnCount ??)

</span>

3. js代码

<script>

    layui.use(["layer"],function (){
        var layer = layui.layer;
        var $ = layui.$;

    })
    //鼠标移上去时弹窗
    function viewCount(id){
        let value = $(".viewCount-"+id).attr("data-value");

        layer.tips('预览人数'+value, '.viewCount-'+id, {
            tips: [1, '#666666'] ,
        });
    }
    //鼠标移开时关闭弹窗
    function viewOut(){
        layer.closeAll();
        return false;
    }

</script>