鼠标悬浮一定时间后显示信息

 

 $(".gridMore").on({"mouseenter":function(){
          showMoreInfo(this);
        },"mouseleave":function(){
          hideMoreInfo(this)
        }
      });

function showMoreInfo(that){
    var x;
    var y;
    function getPos(e){ 
        x = e.pageX;
        y = e.pageY;
    }
    document.addEventListener('mousemove', getPos); 监视鼠标位置
    moreInfoT = setTimeout(function(){
        $("body").append("<div class='moreInfo'></div>");
        $(".moreInfo").html($(that).html()).css("top", y).css("left", x);  //这里的that是用来指向鼠标悬浮位置的div
        document.removeEventListener('mousemove', getPos);
    }, 500);
}

function hideMoreInfo(){
    clearTimeout(moreInfoT);
    $(".moreInfo").remove();
}