mouseoverポップアップレイヤ

スタイルシートpop_us.css
 

.arrow-left {
  background-image: url("../images/arrow_lr.png");
  background-position: 0 -20px !important;
  height: 17px;
  left: -9px;
  overflow: hidden;
  position: absolute;
  top: 20px;
  width: 9px;
}
.pop_outer {
  background: url("../images/layer_bg.png") ;
  border-radius: 4px 4px 4px 4px;
  height: 240px;
  padding: 3px;
  position: absolute;
  width: 252px;
  z-index: 1002;
}
.pop_outer_bg {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 1px solid #CCCCCC;
  height: 218px;
  padding: 10px;
  position: relative;
  width: 230px;
}
.placeholder {
  height: 200px;
  left: -30px;
  position: absolute;
  top: -4px;
  width: 40px;
}
dd {
    height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

jsセクション、jquery

$('#imgSel').mouseover(function(){
		var _offset=$(this).offset();
		$('.pop_outer').css({display:'block',left:_offset.left+$('#imgSel').outerWidth(),top:_offset.top+$('#imgSel').outerHeight()/3}
	)})
	$('#imgSel').mouseout(function(evt){
		var _node=evt.relatedTarget;
		if(!jQuery.contains($('.pop_outer')[0],_node)){
			$('.pop_outer').css('display','none')
		}
		})
	$('.pop_outer').mouseout(function(evt){
		var _node=evt.relatedTarget;
		if(!jQuery.contains($('.pop_outer')[0],_node)){$('.pop_outer').css('display','none')}
		
	})

htmlセクション

<img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" id="imgSel">
<div class='pop_outer'>
	<div class="pop_outer_bg">
	<div class="placeholder"></div>
	<div class="arrow-left">
	</div>
	<dl>
		<dt>
			</dt>
			<dd>fuckyou 1</dd>
			<dd>fuckyou 1</dd>
			<dd>fuckyou 1</dd>
		
	</dl>
</div></div>