JQuery-鼠标悬停显示全部内容

一、效果

       跟随鼠标移动，显示内容也移动。

  <div id="MHover">我就是我，是颜色不一样的烟火！</div>
  <div id="MALL"></div>

二、实现思想

      利用Jquery中mouseover、mousemove、mouseout事件，判断鼠标移动情况。

      通过Jquery中.css({})添加类中样式。

$(document).ready(function () {
    $("#MALL").hide();
    $("#MHover").mouseover(function(e){
        document.getElementById("MALL").innerHTML=document.getElementById("MHover").innerHTML;
        $("#MALL").css({"position":"absolute","top":e.pageY+5,"left":e.pageX+5}).show();
    });
    $("#MHover").mousemove(function(e){
        document.getElementById("MALL").innerHTML=document.getElementById("MHover").innerHTML;
        $("#MALL").css({"position":"absolute","top":e.pageY+5,"left":e.pageX+5});
    });
    $("#MHover").mouseout(function () {
        $(this).next("#MALL").hide();
    });
});