html 将鼠标移动到div上，显示一个小div

将鼠标移动到div上，显示提示信息(div)，并且鼠标移动，显示的div随着鼠标的移动而移动，移出div，显示消失(div)。

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>covid-19_US_status</title>
    <link rel="stylesheet" href=" {% static 'bootstrap-3.3.7-dist/css/bootstrap.css' %}">
    <script src="{% static 'bootstrap-3.3.7-dist/js/jquery.min.js' %}"></script>
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.js' %}"></script>
</head>

<style>
    #father{
        height:400px;
        background-color:green;
    }
    #click-button{
        display:none;
    }
    #father:hover #click-button{
        display:block;
    }
</style>

<body>
    <div style="height:500px;" id="father">
        this is a map
       <button type="button" id='click-button' class="btn btn-primary" data-toggle="collapse" data-target="#demo" style="position: absolute">
        简单的可折叠组件
        </button>
    </div>

    <script>
        $(document).on('mousemove', function(e){
            $('#click-button').css({
               left:  e.pageX+10,
               top:   e.pageY+10
            });
        });
    </script>

</body>

</html>

html 将鼠标移动到div上，显示一个小div

推荐阅读