css提示

鼠标经过链接后的提示样色

先看看效果：

 

< script  language ="javascript"  src ="../common/js_css/addEvent.js"  type ="text/javascript" ></ script >
< script  language ="javascript"  src ="../common/js_css/sweetTitles.js"  type ="text/javascript" ></ script >
< link  rel ="stylesheet"  type ="text/css"  media ="screen"  href ="../common/js_css/sweetTitles.css" />

< a  href ="index.jsp?fNum=1&sNum=_01&type=info&bh=21"  title ="主题:kent<br>内容:测试发送！<br>发表人:" > kent </ a >

 

addEvent.js

/* ------------------------------------------
Add Event (c) Creative Commons 2007
Author: ison
------------------------------------------ */
Array.prototype.inArray  =   function  (value) {
     var  i;
     for  (i = 0 ; i  <   this .length; i ++ ) {
         if  ( this [i]  ===  value) {
             return   true ;
        }
    }
     return   false ;
};

function  addEvent( obj, type, fn ) {
     if  (obj.addEventListener) {
        obj.addEventListener( type, fn,  false  );
        EventCache.add(obj, type, fn);
    }
     else   if  (obj.attachEvent) {
        obj[ " e " + type + fn]  =  fn;
        obj[type + fn]  =   function () { obj[ " e " + type + fn]( window.event ); }
        obj.attachEvent(  " on " + type, obj[type + fn] );
        EventCache.add(obj, type, fn);
    }
     else  {
        obj[ " on " + type]  =  obj[ " e " + type + fn];
    }
}
    
var  EventCache  =   function (){
     var  listEvents  =  [];
     return  {
        listEvents : listEvents,
        add :  function (node, sEventName, fHandler){
            listEvents.push(arguments);
        },
        flush :  function (){
             var  i, item;
             for (i  =  listEvents.length  -   1 ; i  >=   0 ; i  =  i  -   1 ){
                item  =  listEvents[i];
                 if (item[ 0 ].removeEventListener){
                    item[ 0 ].removeEventListener(item[ 1 ], item[ 2 ], item[ 3 ]);
                };
                 if (item[ 1 ].substring( 0 ,  2 )  !=   " on " ){
                    item[ 1 ]  =   " on "   +  item[ 1 ];
                };
                 if (item[ 0 ].detachEvent){
                    item[ 0 ].detachEvent(item[ 1 ], item[ 2 ]);
                };
                item[ 0 ][item[ 1 ]]  =   null ;
            };
        }
    };
}();
addEvent(window, ' unload ' ,EventCache.flush);

 

sweetTitles.js

/*
Sweet Titles (c) Creative Commons 2007
Author: ison
*/
var  sweetTitles  =  { 
    xCord :  0 ,                                 //  @Number: x pixel value of current cursor position
    yCord :  0 ,                                 //  @Number: y pixel value of current cursor position
    tipElements : [ ' a ' , ' abbr ' , ' acronym ' ],     //  @Array: Allowable elements that can have the toolTip
    obj : Object,                             //  @Element: That of which you're hovering over
    tip : Object,                             //  @Element: The actual toolTip itself
    active :  0 ,                                 //  @Number: 0: Not Active || 1: Active
    init :  function () {
         if  (  ! document.getElementById  ||
             ! document.createElement  ||
             ! document.getElementsByTagName ) {
             return ;
        }
         var  i,j;
         this .tip  =  document.createElement( ' div ' );
         this .tip.id  =   ' toolTip ' ;
        document.getElementsByTagName( ' body ' )[ 0 ].appendChild( this .tip);
         this .tip.style.top  =   ' 0 ' ;
         this .tip.style.visibility  =   ' hidden ' ;
         var  tipLen  =   this .tipElements.length;
         for  ( i = 0 ; i < tipLen; i ++  ) {
             var  current  =  document.getElementsByTagName( this .tipElements[i]);
             var  curLen  =  current.length;
             for  ( j = 0 ; j < curLen; j ++  ) {
                addEvent(current[j], ' mouseover ' , this .tipOver);
                addEvent(current[j], ' mouseout ' , this .tipOut);
                current[j].setAttribute( ' tip ' ,current[j].title);
                current[j].removeAttribute( ' title ' );
            }
        }
    },
    updateXY :  function (e) {
         if  ( document.captureEvents ) {
            sweetTitles.xCord  =  e.pageX;
            sweetTitles.yCord  =  e.pageY;
        }  else   if  ( window.event.clientX ) {
            sweetTitles.xCord  =  window.event.clientX + document.documentElement.scrollLeft;
            sweetTitles.yCord  =  window.event.clientY + document.documentElement.scrollTop;
        }
    },
    tipOut:  function () {
         if  ( window.tID ) {
            clearTimeout(tID);
        }
         if  ( window.opacityID ) {
            clearTimeout(opacityID);
        }
        sweetTitles.tip.style.visibility  =   ' hidden ' ;
    },
    checkNode :  function () {
         var  trueObj  =   this .obj;
         if  (  this .tipElements.inArray(trueObj.nodeName.toLowerCase()) ) {
             return  trueObj;
        }  else  {
             return  trueObj.parentNode;
        }
    },
    tipOver :  function (e) {
        sweetTitles.obj  =   this ;
        tID  =  window.setTimeout( " sweetTitles.tipShow() " , 1 );
        sweetTitles.updateXY(e);
    },
    tipShow :  function () {        
         var  scrX  =  Number( this .xCord);
         var  scrY  =  Number( this .yCord);
         var  tp  =  parseInt(scrY + 15 );
         var  lt  =  parseInt(scrX + 10 );
         var  anch  =   this .checkNode();
         var  addy  =   '' ;
         var  access  =   '' ;
         if  ( anch.nodeName.toLowerCase()  ==   ' a ' ) {
         if (anch.href.toString().indexOf( " javascript: " ) ==- 1 ){
            addy  = " 链接至:<span> " +  (anch.href.length  >   45   ?  anch.href.toString().substring( 0 , 45 ) + " ...</span> "  : anch.href);
        }
             var  access  =  ( anch.accessKey  ?   '  快捷键:<span>[ ' + anch.accessKey + ' ]</span><br/>  '  :  ''  );
        }  else  {
            addy  =  anch.firstChild.nodeValue;
        }
         this .tip.innerHTML  =   " <p> " + anch.getAttribute( ' tip ' ) + " <em> " + access + addy + " </em></p> " ;
         if  ( parseInt(document.documentElement.clientWidth + document.documentElement.scrollLeft)  <  parseInt( this .tip.offsetWidth + lt) ) {
             this .tip.style.left  =  parseInt(lt - ( this .tip.offsetWidth + 10 )) + ' px ' ;
        }  else  {
             this .tip.style.left  =  lt + ' px ' ;
        }
         if  ( parseInt(document.documentElement.clientHeight + document.documentElement.scrollTop)  <  parseInt( this .tip.offsetHeight + tp) ) {
             this .tip.style.top  =  parseInt(tp - ( this .tip.offsetHeight + 10 )) + ' px ' ;
        }  else  {
             this .tip.style.top  =  tp + ' px ' ;
        }
         this .tip.style.visibility  =   ' visible ' ;
         this .tip.style.opacity  =   ' .8 ' ;
         this .tip.style.filter  =   " alpha(opacity:80) " ;
//         this.tipFade(40);
    },
    tipFade:  function (opac) {
         var  passed  =  parseInt(opac);
         var  newOpac  =  parseInt(passed + 40 );
         if  ( newOpac  <   80  ) {
             this .tip.style.opacity  =   ' . ' + newOpac;
             this .tip.style.filter  =   " alpha(opacity: " + newOpac + " ) " ;
            opacityID  =  window.setTimeout( " sweetTitles.tipFade(' " + newOpac + " ') " , 1 );
        }
         else  { 
             this .tip.style.opacity  =   ' .80 ' ;
             this .tip.style.filter  =   " alpha(opacity:80) " ;
        }
    }
};
function  pageLoader() {
    sweetTitles.init();
}
addEvent(window, ' load ' ,pageLoader);

 

sweetTitles.css

#wbc_online  {
    MARGIN-BOTTOM :  0px
}
#wbc_online UL  {
    CLEAR :  both ;  PADDING-RIGHT :  0px ;  PADDING-LEFT :  0px ;  FLOAT :  none ;  PADDING-BOTTOM :  0px ;  MARGIN :  2px 0px ;  WIDTH :  100% ;  PADDING-TOP :  0px ;  LIST-STYLE-TYPE :  none
}
#wbc_online UL LI  {
    FONT-SIZE :  12px ;  FLOAT :  left ;  MARGIN :  3px ;  WIDTH :  19%
}
BODY DIV#toolTip  {
    BORDER-RIGHT :  #999 3px double ;  PADDING-RIGHT :  5px ;  BORDER-TOP :  #999 3px double ;  PADDING-LEFT :  5px ;  Z-INDEX :  1000 ;  MIN-HEIGHT :  2em ;  BACKGROUND :  #fff ;  PADDING-BOTTOM :  5px ;  BORDER-LEFT :  #999 3px double ;  WIDTH :  auto ;  PADDING-TOP :  5px ;  BORDER-BOTTOM :  #999 3px double ;  POSITION :  absolute ;  TEXT-ALIGN :  left
}
BODY DIV#toolTip P  {
    PADDING-RIGHT :  0px ;  PADDING-LEFT :  0px ;  PADDING-BOTTOM :  0px ;  MARGIN :  0px ;  FONT :  12px verdana,arial,sans-serif ;  COLOR :  #000 ;  PADDING-TOP :  0px
}
BODY DIV#toolTip P EM  {
    MARGIN-TOP :  3px ;  DISPLAY :  block ;  COLOR :  #000 ;  FONT-STYLE :  normal
}
BODY DIV#toolTip P EM SPAN  {
    FONT :  9px verdana,arial,sans-serif ;  COLOR :  #000
}