鼠标上移显示文字的html

最新推荐文章于 2024-01-10 13:00:31 发布

nilihao

最新推荐文章于 2024-01-10 13:00:31 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

文章标签： function null javascript html border url

本文链接：https://blog.youkuaiyun.com/nilihao/article/details/1829684

本文介绍了一种通过HTML和JavaScript实现的鼠标悬停显示提示文本的效果。该效果可在鼠标悬停于元素上时显示预设的文字说明，适用于网页导航、按钮提示等场景。

<html>

<head>

<title>非常不错的一款连接提示信息显示效果</title>

</head><body>

function openUser(id) {

var Win = window.open("dispuser.asp?name="+id,"openScript");

}

function openScript(url, width, height){

var Win = window.open(url,"openScript",'width=' + width + ',height=' + height + ',resizable=1,scrollbars=yes,menubar=no,status=yes' );

}

function openDis(bid,rid,id){

self.location="dispbbs.asp?boardid="+bid+"&RootID="+rid+"&id="+id

}

function PopWindow()

{

openScript('messanger.asp?action=newmsg',420,320);

}

var nn = !!document.layers;

var ie = !!document.all;

if (nn) {

netscape.security.PrivilegeManager.enablePrivilege("UniversalSystemClipboardAccess");

var fr=new java.awt.Frame();

var Zwischenablage = fr.getToolkit().getSystemClipboard();

}

function submitonce(theform){

//if IE 4+ or NS 6+

if (document.all||document.getElementById){

//screen thru every element in the form, and hunt down "submit" and "reset"

for (i=0;i<theform.length;i++){

var tempobj=theform.elements[i]

if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")

//disable em

tempobj.disabled=true

}

</script>

//***********默认设置定义.*********************

tPopWait=50;//停留tWait豪秒后显示提示。

tPopShow=2000;//显示tShow豪秒后关闭提示

showPopStep=20;

popOpacity=99;

//***************内部变量定义*****************

sPop=null;

curShow=null;

tFadeOut=null;

tFadeIn=null;

tFadeWaiting=null;

document.write("<style type='text/css'id='defaultPopStyle'>");

document.write(".cPopText { background-color: #FFFFFF;color:#000000; border: 1px #000000 solid;font-color: font-size: 10px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");

document.write("</style>");

document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");

function showPopupText(){

var o=event.srcElement;

MouseX=event.x;

MouseY=event.y;

if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};

if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};

if(o.dypop!=sPop) {

sPop=o.dypop;

clearTimeout(curShow);

clearTimeout(tFadeOut);

clearTimeout(tFadeIn);

clearTimeout(tFadeWaiting);

if(sPop==null || sPop=="") {

dypopLayer.innerHTML="";

dypopLayer.style.filter="Alpha()";

dypopLayer.filters.Alpha.opacity=0;

}

else {

if(o.dyclass!=null) popStyle=o.dyclass

else popStyle="cPopText";

curShow=setTimeout("showIt()",tPopWait);

}

function showIt(){

dypopLayer.className=popStyle;

dypopLayer.innerHTML=sPop;

popWidth=dypopLayer.clientWidth;

popHeight=dypopLayer.clientHeight;

if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24

else popLeftAdjust=0;

if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24

else popTopAdjust=0;

dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;

dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;

dypopLayer.style.filter="Alpha(Opacity=0)";

fadeOut();

}

function fadeOut(){

if(dypopLayer.filters.Alpha.opacity<popOpacity) {

dypopLayer.filters.Alpha.opacity+=showPopStep;

tFadeOut=setTimeout("fadeOut()",1);

}

else {

dypopLayer.filters.Alpha.opacity=popOpacity;

tFadeWaiting=setTimeout("fadeIn()",tPopShow);

}

function fadeIn(){

if(dypopLayer.filters.Alpha.opacity>0) {

dypopLayer.filters.Alpha.opacity-=1;

tFadeIn=setTimeout("fadeIn()",1);

}

document.onmouseover=showPopupText;

</script>

A:visited{TEXT-DECORATION: none;Color:#000000}

A:active{TEXT-DECORATION: none;Color:#000000}

A:hover{TEXT-DECORATION: underline;Color:#000000}

A:link{text-decoration: none;Color:#000000}

.t{LINE-HEIGHT: 1.4}

BODY{FONT-FAMILY: "宋体"; FONT-SIZE: 12px;

SCROLLBAR-HIGHLIGHT-COLOR: #9BDBDB;

SCROLLBAR-SHADOW-COLOR: #9BDBDB;

SCROLLBAR-3DLIGHT-COLOR: #9BDBDB;

SCROLLBAR-TRACK-COLOR: #FFFFFF;

SCROLLBAR-DARKSHADOW-COLOR: #9BDBDB;

scrollbar-Base-Color: #9BDBDB;

Color:#000000

}

td, p, div, br{FONT-FAMILY: "宋体"; FONT-SIZE: 12px;Color:#000000;}

FORM{FONT-FAMILY: "宋体"; FONT-SIZE: 12px}

OPTION{FONT-FAMILY: "宋体"; FONT-SIZE: 12px}

INPUT{BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 9pt; BORDER-LEFT-COLOR: #cccccc; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #cccccc; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #cccccc; PADDING-TOP: 1px; HEIGHT: 18px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #cccccc; font-family: "宋体"; font-size: 12px}