消息提示框（鼠标浮动）【原创】

示列 （提示框位于内容下方）鼠标移入范围内容 消息提示框显示，鼠标移出 消息提示框隐藏

提示框箭头自动居中（针对文本）

CSS代码

.wrap-float{position:relative; display:block; z-index:111;}
.wrap-float a{ text-decoration:none; border-bottom:1px dashed; color:#003d86}
.wrap-float a:hover{color:#FF0000}
.wrap-float .float-box{display:none; position:absolute; left:0; background-color:#FFF; z-index:222; *top:19px; text-align:left}
.wrap-float  .dirUp{ position:absolute; width:22px; height:10px; left:0; z-index:223; background:url(../images/icon4.jpg) no-repeat; overflow:hidden;}
.wrap-float  .float-bd{border:1px solid #a1b2e0; margin-top:9px; background:#fff} /*边框*/

JS代码

$(function(){

  $(".wrap-float").live("mouseenter",function(){
    var width=($(this).width().toString()).split("px");
    var lt=0;
     if($.browser.version != "6.0"){
       lt=parseInt(width[0])/2-10;//计算箭头针对文字的位置
      }
    $(this).css({"z-index":444});
    $(this).children(".float-box").css("display","block");
    $(this).children(".float-box").children(".dirUp").css("left",lt+"px");//箭头针对文字居中
   
   }).live('mouseleave', function () {
                $(this).css({"z-index":111});
       $(this).children(".float-box").css({"display":"none"});
              });   

});

'mouseenter',  'mouseleave',的功能等同于 'hover',在live形式使用。

使用live可针对于后期添加元素始终有效

 

页面引用 消息提示框