バルーンはマウスで移動します

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 

    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スタイル> 
        * { 
            パディング： 0 ; 
            マージン： 0 ; 
        } 
        ■は{幅：500pxなど;マージン：300ピクセル、オート;ボーダー：固体1ピクセルブラック;位置：相対;} 
        .TITLE {} 
        .TITLE H2 {背景 -color：#CCC;パディング：10pxの0。国境：1pxの固体＃000 ;
            / * 位置：相対; * / 
            / * z屈折率：2。* / 
            マージン - 下：30px;}
        P {幅.cont：200pxの、背景：#eee;マージン： 0;表示：なし;位置：絶対;左：0;トップ：0 ;
             / * Zインデックス:. 6; * / 
          }

     </スタイル> 
</ヘッド> 
<身体> 
の<divクラス= "ボックス"> 
    <DIV CLASS = "タイトル"> 
        <H2>タイトル小見出し2つの小見出し1111 </ H2> 
        <H2>タイトル小見出し2つの小見出し2222 </ H2> 
    </ div> 
    <divのクラス=「CONT」> 
        <p型>最初のニュースコンテンツ最初のニュースコンテンツの最初のニュースコンテンツ最初のニュースコンテンツの最初のニュースコンテンツ最初のニュースの内容ニュースコンテンツのニュースの第一の情報コンテンツの第1のコンテンツのニュース情報の内容の第一の情報コンテンツの第1のコンテンツの最初のニュースコンテンツ</ P> 
        <P>第二の第二の情報コンテンツ二第二のニュースコンテンツの第2のニュース内容の第二のニュースの内容の第二のニュースの内容の第二のニュースの内容の第二のニュースの内容の第二のニュースの内容の第二のニュースコンテンツのニュースコンテンツ第二のニュースの内容第二のニュースコンテンツのニュースコンテンツ第二ニュースコンテンツ</ P>
    </ div> 
</ div> 
</ body> 
<スクリプト>
VAR AH = document.querySelectorAll（ "H2タイトル" ）;
 VAR aPの= document.querySelectorAll（ "CONT P." ）
     のための（VARの {; I <aH.length I ++はI = 0）// 最初のトラバーサル要素 
        AH [I] =私は.INDEX;   // 番号 
        AH [I] .onmouseover = 関数（）{ // 着信表示をシフト 
            aPの【この .INDEX] .style.display = "ブロック" ; 

        } 
        AH [I] .onmouseout = 関数（）{ // シフトアウト消失 
            aPの【この .INDEX] .style.display = "なし"を
        } 
        AH [I] .onmousemove =関数（イブ）{ // マウスのpダウン
            するvar E = ||イブwindow.event 
            aPの【この .INDEX] + 5 + e.offsetX .style.left = "PX" 、
          
            aPの【この .INDEX] .style.top 5 + + = e.offsetY。
                 この .offsetTop +「PX」;   // Pの位置決めがイベントソースに対して相対オフセット大きなブロックを、調整するので、イベントソース相対を追加する必要はありませ左と大きな箱の上に、5は、pおよびhはpが点滅していないようにずらしてみましょうすることです。
        } 
    }
 </ SCRIPT> 
</ HTML>
バルーンはマウスで移動します

おすすめ
