鼠标移动显示tip信息

实现了：

1. 点击按钮显示不同信息
2. 根据鼠标位置显示不同信息提示

界面：

代码：

html：

    
    <div id="content">
        
        <ul id="header">ul>
        

        
        <div id="list">div>
    div>
    
    <div id="tips">
        
        <div id="tipcontent">div>
    div>

css：

  *{
   
            margin: 0;
            padding: 0;
        }
        body{
   
            font-size: 14px;
        }
        li{
   
            list-style: none;
        }
        #content{
   
            width: 800px;
            margin: 100px auto;
            background: pink;
            /* height: 1000px; */
        }
        #header{
   
            width: 100%;
            height: 50px;
            border-bottom: solid 2px skyblue;
        }
        #header li{
   
            line-height: 50px;
            width: 100px;
            text-align: center;
            float: left;
            font-size: 20px;
        }
        #header li:hover{
   
            cursor: pointer;
        }
        #header li.set{
   
            color: honeydew;
            background: skyblue;
        }
        #list ul>li{
   
            padding: 5px;
        }
        #list ul>li>a{
   
            text-decoration: none;
            color: green;
            font-weight: bold;
        }
        #tips{
   
            width: 500px;
            height: 130px;
            background: white;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            border:solid 3px skyblue ;
        }
        #tips li{
   
            font-size: 15px;
            line-height: 30px;
            float: left;
            width: 240px;
            border-bottom: solid 1px #eee;
            padding-left: 5px;
        }

js：

<script src="datas.js"></script>
    <script>
        window.onload = function(){
   
            var con = document.getElementById('content');
            var head = document.getElementById('header');
            var list = document.getElementById('list');
            var tip = document.getElementById('tips');
            var tipcon = document.getElementById('tipcontent');
            // 获取数据并显示
            for(let i = 0; i < data.length; i++){
   
                head.innerHTML += "
" + data[i].name + "
"