自定义a标签悬浮title样式

原文链接: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>复制代码


展开阅读全文

没有更多推荐了,返回首页