マウスオーバーでふきだし

見出し1
あいうえお
見出し2
平城京朱雀門より満月を望む
Category空
September 8, 2009
■HTML 
<dl id="myNews">
  <dt>見出し1</dt>
    <dd>
      あいうえお
    </dd>
  <dt>見出し2</dt>
    <dd>
      <img src="http://www.kys-lab.com/photo/assets_c/2009/09/heijoukoyu004.jpg-thumb-autox146-874.jpg" style="float:left;" />
      平城京朱雀門より満月を望む<br />
      Category空<br />
      September 8, 2009<br />
  </dd>
</dl>
■Javascript 
// ふきだしにする要素を、透明度50%にして隠す
jQuery("#myNews dd").css({opacity:0.5}).hide();

// dt要素にイベントを追加
//  コード量が増えてくると、bind命令を使った方が整理できると思います
//  jQuery("#myNews dt").bind("mouseover",mouseOverHandler);

// id=myNews要素内のdtにmouseoverイベント追加
jQuery("#myNews dt").mouseover(function(e){
  // e.targetは、マウスオーバーした要素
  //  next()でe.targetの「次」の兄弟要素を取得
  var t = jQuery(e.target).next();
  // e.clientYは、マウスカーソルの座標
  // css()で、要素にCSSを設定
  // show()で、表示
  t.css({position:"absolute",top:(e.clientY),left:(e.clientX+15)}).show();
});

jQuery("#myNews dt").mousemove(function(e){
  var t = jQuery(e.target).next();
  t.css({top:(e.clientY),left:(e.clientX+15)});
});

jQuery("#myNews dt").mouseout(function(e){
  var t = jQuery(e.target).next();
  // hide()で、隠す
  t.hide();
});