JQuery 控制div的可见性

白沙王

于 2023-06-17 17:18:21 发布

阅读量134

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_50784508/article/details/131262545

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="JQuery/jquery-1.7.1.min.js"></script>
    <style>
        /*设置图片属性*/
        img{
            width:100px;
            height:100px;
        }
        /*设置div属性*/
        #showMsg{
            width:200px;
            height:200px;
            background-color:white;
            color:red;
            display:none;
            border:1px solid red;
            position:absolute;
        }
    </style>
    <script>
        var list = {
            'zg': ['中国', '北京', '牡丹', '世界第二大经济体'],
            'mg': ['美国', '华盛顿', '玫瑰', '白人与黑人一起劳动，却想到仇视'],
            'rb': ['日本', '东京', '樱花', '世界文明的两样东西：忍者和A片'],
            'hg': ['韩国', '首尔', '无穷', '民族意识超强']
        };
        //加载
        $(function () {
            //鼠标指向移出事件
            $('img').hover(function (e) {
                //创建变量存储鼠标指向图片的的id的查找集合的元素
                var info = list[this.id];
                //创建存储文本信息的msg
                var msg = '国家：' + info[0] + '<br/>首都：' + info[1] + '<br/>国花：' + info[2] + '<br/>简介：' + info[3] + '<br/>';
                //设置div的属性
                $('div').css({ 'left': e.clientX, 'top': e.clientY, 'display': 'block' }).html(msg);
        
            }, function () {
                //鼠标移开事件，div不可见
                $('div').css({'display':'none'})
            })
        });
    </script>
</head>
<body>
    <img src="Images/hg.jpg" id="hg" />
    <img src="Images/mg.jpg" id="mg" />
    <img src="Images/rb.jpg" id="rb" />
    <img src="Images/zg.jpg" id="zg" />

    <div id="showMsg"></div>
</body>
</html>