移动到文字显示提示效果

        *{
            margin: 0;
            padding: 0;
        }
        a {
            margin:50px;
            /*display: block;*/
        }
        #box {
            width: 300px;
            background: #eee;
            border: 1px solid #000;
            position: absolute;
            padding: 10px;
            display: none;
            line-height: 30px;
        }
        #img {
            height: 269px;
            width: 358px;
            position: absolute;
            border: 1px solid #000;
            display: none;
        }
提示文字效果
//jq
                var x = 15;
        var y = 15;
        $(function() {

            $("a").mouseover(function(e) {
                this.myTitle = this.title;//保存获取当前元素a属性title的值
                this.title = "";//清空默认的title值

                var oDiv = "
" +this.myTitle + "
"; $("body").append(oDiv); $("#box").css({ "left": e.pageX + x + "px", "top": e.pageY + y + "px" }).show("fast");//slow normal fast 显示速度快慢的值 }).mouseout(function() { this.title = this.myTitle;//移出后为title在赋值 $("#box").remove(); }).mousemove(function(e) { var X = e.pageX + x; var Y = e.pageY + y; $("#box").css({ "left": X + "px", "top": Y + "px" }); }); });
var oA = document.getElementsByTagName("a")[0];
     console.log(oA)
    console.log(oA.getAttribute("title"))
    console.log(oA.attributes)//获取收的属性

        var oDiv = document.createElement("div");
            oDiv.setAttribute("id", "box"); //设置属性
            oDiv.innerHTML = oA.getAttribute("title"); //获取属性值
            console.log(oDiv)
        document.getElementsByTagName("body")[0].appendChild(oDiv);
        
        var d = document.getElementById("box");
        var x = 20;
        var y = 20;
     oA.onmouseover = function(e) { 

        oA.setAttribute("title", "");//属性值为空
        d.style.display = "block";

        document.onmousemove = function(e) {

            console.log(e.clientX);
            console.log(e.clientY);
            d.style.left = e.clientX + x + "px";
            d.style.top = e.clientY + y + "px";
        };

     };
    
     oA.onmouseout = function() {

        d.style.display = "none";

     };

注意:移动到文字上取消默认的提示信息,
移入时,保持this.tilte = this.myTitle;移出后在移入时在把this.myTilte赋给this.title.这样就可以做到取消默认提示。获取鼠标坐标的方法pageX,pageY;

你可能感兴趣的:(移动到文字显示提示效果)