图片定义的title提示信息的样式以及提示信息跟随鼠标代码,Js代码库,德仔网

代码语言

代码分类

【Js】图片定义的title提示信息的样式以及提示信息跟随鼠标

作者:贞霖 / 发布于2016/6/15/ 1140

$(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>'+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;}

试试其它关键字

同语言下

可能有用的

贞霖贡献的其它代码(11)