Jquery實現滑鼠移上彈出提示框、移出消失思路及代碼

思路：

1.首先要定位實現這種效果的元素 ，本次通過class

2.如果是動態顯示不同的提示內容，需設定title

3.通過JQ給定位到元素加上 mouseover 和mouseout 事件

4.再完善下，彈出框跟隨滑鼠在目標元素上移動

5.再把 mouseover 、mouseout 合并成 hover
複製代碼 代碼如下:
//頁面載入完成
$(function () {
    var x = 10;
    var y = 20; //設定提示框相對於位移位置，防止遮擋滑鼠
    $(".prompt").hover(function (e) {  //滑鼠移上事件
        this.myTitle = this.title; //把title的賦給自訂屬性 myTilte ，屏蔽內建提示
        this.title = "";
        var tooltipHtml = "<div id='tooltip'>" + this.myTitle + "</div>"; //建立提示框
        $("body").append(tooltipHtml); //添加到頁面中
        $("#tooltip").css({
            "top": (e.pageY + y) + "px",
            "left": (e.pageX + x) + "px"
        }).show("fast"); //設定提示框的座標，並顯示
    }, function () {  //滑鼠移出事件
        this.title = this.myTitle;  //重新設定title
        $("#tooltip").remove();  //移除彈出框
    }).mousemove(function (e) {   //跟隨滑鼠移動事件
        $("#toolti").css({ "top": (e.pageY + y) + "px",
            "left": (e.pageX + x) + "px"
        });
    });
});