您的位置:首页 > Web前端 > CSS

图片定义的title提示信息的样式以及提示信息跟随鼠标的移动而移动的效果

2012-11-12 13:39 579 查看
$(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{width: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{width:10px;height:10px; position:absolute; background-position:-277px -25px;right:10px;top:25px;}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: