Balloon moves with the mouse

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{width:500px;margin: 300px auto;border: solid 1px black;position: relative;}
        .title{}
        .title h2{background-color: #ccc;padding: 10px 0;  border: 1px solid #000;
            /*position: relative;*/
            /*z-index: 2;*/
            margin-bottom: 30px;}
        P {width .cont: 200px; background: #eee; margin: 0; the display: none; position: Absolute; left: 0; Top: 0 ;
             / * Z-index:. 6; * / 
          }

     </ style> 
</ head> 
<body> 
<div class = "Box"> 
    <div class = "title"> 
        <H2> The title subheadings two subheadings 1111 </ H2> 
        <H2> The title subheadings two subheadings 2222 </ h2> 
    </ div> 
    <div class = "CONT"> 
        <the p-> The first news content first news contents of the first news content first news contents of the first news content first news content The first news contents of the first contents of the first information content of a news information contents of the first contents of the first information content of a news content news </ P> 
        <P> the second information contents of the second The second news content news content second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second news contents of the second second news content The second news content news content second news content </ p>
    </div>
</div>
</body>
<script>
var aH = document.querySelectorAll ( "H2 title." );
 var the aP = document.querySelectorAll ( "CONT P." );
     for ( var I = 0; I <aH.length; I ++) { // first traversal element 
        aH [I] = I .index;   // number 
        aH [I] .onmouseover = function () { // shift incoming display 
            the aP [ the this .index] .style.display = "Block" ; 

        } 
        aH [I] .onmouseout = function () { // shift disappears out 
            the aP [ the this .index] .style.display = "none" 
        } 
        aH [I] .onmousemove = function (Eve) { // the p-down with the mouse 
            var E = || Eve the window.event 
            the aP [ the this .index] +. 5 + e.offsetX .style.left = "PX" ; 
          
            the aP [ the this .index] .style.top. 5 + + = e.offsetY
                 the this .offsetTop + "PX";   // because the positioning of the p coordinates relative large block, offset with respect to the event source, not need to add the event source relative to the left and top of the big boxes; +5 is to let p and h staggered so p would not have been flashes. 
        } 
    }
 </ Script> 
</ HTML>
Balloon moves with the mouse

Guess you like
