跟随鼠标的提示框

CSS样式
        *{margin: 0;}
        div{
        	width: 300px;
        	margin: 50px auto;
        	position: relative;
        	}
        h1{
        background-color: cyan;
        text-align: center;
        line-height: 50px;
        }
        p{
        background-color: lime;
        border: solid 1px green;
        padding: 10px;
        color: black;
        position: absolute;
        width: 300px;
        display: none;
        left: 0;
        top: 0;
        z-index: 999;
        }

HTML代码
    <div class="box">
        <h1>彼岸花</h1>
        <p>彼岸花的火红鲜艳，在人们的严重是死亡与不详的象征，传说也大多悲惨动人，相传是长在黄川忘川河畔的花，接引着亡魂通往地狱，也象征着求而不得的爱情。</p>
    </div>
    <div class="box">
        <h1>海棠花</h1>
        <p>早在先秦时期的文献中就有记载海棠花在中国古代的栽培历史。在汉代，海棠花就已经与园林艺术结下不解之缘。不论是栽培技术还是种植面积，海棠花在唐代有了明显的提高。宋代时期，海棠花在唐朝的基础上得到了更大的发展，终于达到鼎盛时期，在当时就被视为“百花之尊”。
        </p>
    </div>
    <div class="box">
        <h1>月季花</h1>
        <p>中国是月季的原产地之一。月季花荣秀美，姿色多样，四时常开，深受人们的喜爱，中国有52个城市将它选为市花，1985年5月月季被评为中国十大名花第五名。</p>
    </div>

JavaScript代码
    var h1 = document.querySelectorAll("h1");
    for(var i=0;i<h1.length;i++){
        h1[i].onmouseover = function(){
            this.nextElementSibling.style.display = "block";
        }
        h1[i].onmousemove = function(eve){
            var e = eve || event;
            this.nextElementSibling.style.left = e.offsetX + 5 + "px";
            this.nextElementSibling.style.top = e.offsetY + 5 + "px";
        }
        h1[i].onmouseout = function(){
            this.nextElementSibling.style.display = "none"
        }
    }