鼠标悬浮事件 -jQuery hover（）方法（layer.js）（layer.tips）

最新推荐文章于 2024-03-03 17:53:02 发布

Saggitarxm

最新推荐文章于 2024-03-03 17:53:02 发布

阅读量1.9k

点赞数

分类专栏：弹层组件文档 - layui.layer HTML 文章标签： layer.tips layer hover layui.js layui

本文链接：https://blog.csdn.net/xuezhangjun0121/article/details/100730765

版权

HTML 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

弹层组件文档 - layui.layer

2 篇文章 0 订阅

订阅专栏

鼠标悬浮事件 -jQuery hover（）方法代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="title-01"><span class="name">机构账户统计</span></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./layer-v3.1.1/layer/layer.js"></script>
<script type="text/javascript">
    var differentindex = 999;
    $(function(){
        $(".name").hover(function() {
            openMsg();
        }, function() {
            layer.close(differentindex);
        });
    });
    function openMsg() {
        console.log('------open msg')
        differentindex = layer.tips('点击分类内容项，可查看下一级机构账户统计情况', '.name', {
            tips: [1, '#3595CC'],
            time: 30000
        });
    }
</script>
</body>
</html>

以下是目录结构截图：

（需要注意的是，layer.js的引入，从官网下载了layer.js，保存到本地，然后从文件中引入 - 注意修改代码中引入layer.js的路径（line 10））

layer官网：http://layer.layui.com/

layer.js下载地址：http://layer.layui.com/

效果如下：

免下载layer.js文件，直接通过 CDN（内容分发网络）引用layui.js，使用layui.js下的layer，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="title-01"><span class="name">机构账户统计</span></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--<script src="./layer-v3.1.1/layer/layer.js"></script>-->
<script src="https://www.layuicdn.com/layui/layui.js"></script>

<script type="text/javascript">


    // layer.msg('hello');

    var differentindex = 999;
    $(function(){
        $(".name").hover(function() {
            openMsg();
        }, function() {
            layer.close(differentindex);
        });
    });
    function openMsg() {
        layui.use('layer', function() {
            var layer = layui.layer;
            console.log('------open msg')
            differentindex = layer.tips('点击分类内容项，可查看下一级机构账户统计情况', '.name', {
                tips: [1, '#3595CC'],
                time: 30000
            });
        })

    }
</script>
</body>
</html>