在thickbox显示层

在练习JQUERY的时候 选择thickbox作为popwindow;但是发现几个问题:
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>

你可能感兴趣的:(JavaScript,html,jquery,XHTML,css)