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

思路：

1.首先要定位實現此效果的元素，本次透過class

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

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

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

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

5.再完善把mouseover 、mouseout 合併成hover 複製程式碼

程式碼如下:



程式碼如下:



$(function () {
    var x = 10;
    var y = 20; //設定提示框相對於偏移位置，防止遮擋滑鼠
    $(".prompt"). hover(function (e) {  //滑鼠移上事件
        this.myTitle = this.title; //把title的賦給自訂屬性myTilte ，屏蔽自帶提示
     
        var tooltipHtml = "

" this.myTitle "

"; //建立提示框
        $("body").append(tooltipHtml); //加入頁中
        $("#tooltip").css({
            "top": (e.pageY y) "px",
    "top": (e.pageY y) "px",
🎜>        }).show("fast"); //設定提示框的座標，並顯示
    }, function () {  //滑鼠移出事件
        this.title = 1/Title;設定title
        $("#tooltip").remove();  //移除彈出方塊
    }).mousemove(function (e) {   //滑鼠移動事件

  o function (e) {   //追蹤滑鼠移動事件  p. ").css({ "top": (e.pageY y) "px",             "left": (e.pageX x) "px"        });  >});