$(function(){
var x;
var y = 38;
$(".classTab td:parent").live('mouseover',function(e){
this.myTitle = this.title;
this.title = "";
var popHtml ='<div class="tishiBox"><span class="spanL"><\/span><span class="spanR"><\/span><p>'+this.myTitle+'<\/p><em><\/em><\/div>';
$("body").append(popHtml);
//alert(e.pageX)
x = $(".tishiBox").width()-10;
$(".tishiBox").css({
left:(e.pageX - x) + "px",
top:(e.pageY - y) + "px"
}).show()
}).live('mouseout',function(){
this.title = this.myTitle;
$(".tishiBox").remove();
}).live("mousemove",function(e){
x = $(".tishiBox").width()-10;
$(".tishiBox").css({
left:(e.pageX - x) + "px",
top:(e.pageY - y) + "px"
})
})
})
CSS样式:
.tishiBox,.tishiBox span,.tishiBox em{ position:absolute;display:inline-block; background:url(../images/tishiBg2.png);}
.tishiBox{left:100px;height:36px; position: absolute; white-space:nowrap;background-position:-10px 0;}
.tishiBox span{ position:absolute;display:inline-block; background:url(../images/tishiBg.png)}
.tishiBox span.spanL,.tishiBox span.spanR{10px;height:36px;top:0;}
.tishiBox span.spanL{ background-position:0 0;left:-10px;}
.tishiBox span.spanR{ background-position:right 0;right:-10px;}
.tishiBox p{padding:0 10px;line-height:30px;color:#e70909;}
.tishiBox em{10px;height:10px; position:absolute; background-position:-277px -25px;right:10px;top:25px;}