thickbox表示レイヤ


JQUERYの練習中にpopwindowとしてthickboxを選択します.しかし、いくつかの問題が見つかりました.
1:レイヤーの座標制御
2:レイヤのmouseoutイベント
問題1:jqueryのoffsetを使用して座標を処理する;表示層を必要とするcssの「z-index」属性がthickbox層の「z-index」属性より大きいことを設定し、このssss DIVがthickboxの外にあってもトップ表示できるようにする.

					   $('#city2').click(function (e){
						   	var offset = {'top':e.pageY,'left':e.pageX};
							$('#ssss').css("position" ,"fixed").css("z-index" ,"200").css("display","block").css(offset);
					   });

問題2:javascriptのmouseoutにはいくつかの問題があるようですが、代わりにjqueryのhoverを使用してmouseoutイベントによる問題の代わりに使用することができます.

						$("#ssss").hover(function(){
						  $(this).css("display","block");
						},function(){
						  	$(this).css("display","none");
						});

完全なサンプルコード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="js/jquery-latest.js"></script>
<script src="js/thickbox-compressed.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script>
jQuery(document).ready(function(){
   $('#city2').click(function (e){
	   	var offset = {'top':e.pageY,'left':e.pageX};
		$('#ssss').css("position" ,"fixed").css("z-index" ,"200").css("display","block").css(offset);
   });
	$("#ssss").hover(function(){
		$(this).css("display","block");
	},function(){
	  	$(this).css("display","none");
	});
});
</script>
</head>
<body>
<a href="#TB_inline?height=155&amp;width=300&amp;inlineId=hiddenModalContent&amp;modal=true" class="thickbox">Show hidden modal content.</a>
<div id="hiddenModalContent" style="display:none">
  <p> <a>  </a> <a id="city2">  </a> </p>
  <p style="text-align:center">
    <input type="submit" id="Login" value="&nbsp;&nbsp;Ok&nbsp;&nbsp;" onclick="tb_remove()" />
  </p>
</div>
<div id="ssss" style="border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; display:none;">
  <ul>
    <li>  
      <input type="checkbox"/>
    </li>
    <li>  
      <input type="checkbox"/>
    </li>
    <li>  
      <input type="checkbox"/>
    </li>
  </ul>
</div>
</body>
</html>