自定义a标签悬浮title样式

最新推荐文章于 2023-11-03 10:29:29 发布

weixin_34032621

最新推荐文章于 2023-11-03 10:29:29 发布

阅读量2.5k

点赞数 1

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/59eb0a35f265da4312800e3e

版权

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
            #tooltip {
                border: 1px solid red;
                background: #FF6;
                position: absolute;
                padding: 1px;
                color: #333;
                display: none;
            }
        </style>
        <script src=""></script>
    </head>

    <body>

        <div id="link">
            <p>
                <a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a>
            </p>
            <p>
                <a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a>
            </p>
            <p>
                <a href="#" title="这是我的超链接提示1">自带提示1</a>
            </p>
            <p>
                <a href="#" title="这是我的超链接提示2">自带提示2</a>
            </p>
        </div>
        <script type="text/javascript">
            $(function() {
                var x = 10;
                var y = 20;
                $("a.tooltip").mouseover(function(e) {
                    this.myTitle = this.title;
                    this.title = "";
                    var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建DIV元素
                    $("#link").append(tooltip); //追加到文档中
                    $("#tooltip").css({
                        "top": (e.pageY + y) + "px",
                        "left": (e.pageX + x) + "px"
                    }).show(); //设置X  Y坐标， 并且显示
                }).mouseout(function() {
                    this.title = this.myTitle;
                    $("#tooltip").remove(); //移除
                }).mousemove(function(e) {
                    $("#tooltip").css({
                        "top": (e.pageY + y) + "px",
                        "left": (e.pageX + x) + "px"
                    });
                })
            })
        </script>
    </body>

</html>复制代码

weixin_34032621

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
自定义a标签悬浮title样式

&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫