鼠标移动显示tip信息

最新推荐文章于 2023-04-24 15:11:07 发布

wybxzht

最新推荐文章于 2023-04-24 15:11:07 发布

阅读量1k

点赞数

分类专栏：实例练习文章标签： js html css

本文链接：https://blog.csdn.net/wybxzht/article/details/108550006

版权

这篇博客介绍了如何利用JavaScript、HTML和CSS实现点击按钮显示不同信息以及根据鼠标位置动态显示信息提示的功能。提供了完整的代码示例，包括HTML结构、CSS样式和JavaScript逻辑，以及一个名为`datas.js`的数据源文件。

摘要由CSDN通过智能技术生成

实现了：

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

界面：
在这里插入图片描述
代码：

html：

    <!-- 总体内容 -->
    <div id="content">
        <!-- 导航栏 -->
        <ul id="header"></ul>
        <!-- 
            li的加入
                使用innerHTML加入
        设置值
            值为data中的数据
        -->

        <!-- 列表项 -->
        <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 += "<li>" + data[i].name + "</li>"