js实现跟随鼠标移动的提示框

最新推荐文章于 2024-07-23 16:14:20 发布

pengzihui

最新推荐文章于 2024-07-23 16:14:20 发布

阅读量1.6k

点赞数

文章标签： js css html javascript

本文链接：https://blog.csdn.net/pengzihui/article/details/104883139

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 300px;height: 40px;background: #ccc;margin: 20px auto;position: relative;}
        .box *{margin: 0;}
        .box h2{line-height: 40px;}
        .box p{width: 200px;background: #eee;font-size: 14px;position: absolute;left:0;top:0;display: none;z-index: 1;}

        #box{width: 100px;height: 100px;background: red;display: block}
        #box:hover{display: none;}

    </style>
</head>
<body>
    <div class="box">
        <h2>这是一个标题1</h2>
        <p>这是标题1对应的详细文本这是标题1对应的详细文本这是标题1
        对应的详细文本这是标题1对应的详细文本这是标题1
        对应的详细文本这是标题1对应的详细文本这是标题1</p>
    </div>
    <div class="box">
        <h2>这是一个标题2</h2>
        <p>这是标题2对应的详细文本题2对应的详细文本题2对应的详细文本题2
        对应的详细文本题2对应的详细文本题2对应的详细文本题2
        对应的详细文本题2对应的详细文本题

最低0.47元/天解锁文章

pengzihui

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现跟随鼠标移动的提示框

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{width: 300px;height: 40px;background: #ccc;margi...
复制链接

扫一扫