鼠标经过文字提示

最新推荐文章于 2023-04-13 15:46:53 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2023-04-13 15:46:53 发布

阅读量719

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Guoyu1_/article/details/85759000

版权

js 专栏收录该内容

83 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字图片提示效果</title>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        body{font-size: 12px;padding: 100px}
        a{text-decoration: none;}
        #two{width: 300px;border: 1px solid #ccc;background: #eee;line-height:30px;position: absolute;padding: 10px;display: none;}
    </style>
</head>
<body>
<a href="#" class="box" title="你好." >文字提示</a>
<script>
    $(function () {
        var x=10;
        var y=20;
        $('.box').mouseover(function (e) {      /*鼠标移上去*/
            this.myTitle=this.title;
            this.title="";
            var a="<div id='two'>"+this.myTitle+"</div>";      /*显示a标签里的title字段*/
            $('body').append(a);     /*append()方法用来追加到页面，添加div*/
            $('#two').css({
                "left":(e.pageX+x)+"px" ,     /*鼠标移动位置横向纵向10px*/
                "top":(e.pageY+y)+"px"
            }).show("fast");     /*鼠标快速显示*/
        }).mouseout(function () {            /*鼠标移出*/
            this.title=this.myTitle;
            $('#two').remove();
        }).mousemove(function (e) {
            $('#two').css({
                "left":(e.pageX+x)+"px" ,
                "top":(e.pageY+y)+"px"
            });
        });
    });
</script>
</body>
</html>

效果图：

前端路上迷茫的小鲨鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标经过文字提示

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;文字图片提示效果&lt;/title&gt; &lt;script type="text/javascript" src=
复制链接

扫一扫