利用层显示Title内容

最新推荐文章于 2026-01-07 00:05:42 发布

原创最新推荐文章于 2026-01-07 00:05:42 发布 · 679 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#stylesheet #function #class #div #javascript #html

Javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的鼠标悬停显示提示信息的功能。通过自定义的CSS样式和JavaScript代码，可以在鼠标悬停于特定链接上时显示额外的信息，增强了用户体验。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Title层</title>

<!--

font-size:12px;

font-family: Tahoma;

text-decoration: none;

}

a:hover {

text-decoration:underline;

}

-->

</style>

var isIE = document.all?true:false;

function overlib(tipcontent)

{

customdiv = document.getElementById("overDiv");

customdiv.innerHTML = "<table width=150><tr><td>"+tipcontent+"</td></tr></table>";

var tleft=document.body.scrollLeft+window.event.clientX;

var ttop=document.body.scrollTop+window.event.clientY;

if(document.body.clientWidth < 300)

{

customdiv.style.left = 2;

}

else if (tleft > document.body.clientWidth-200)

{

customdiv.style.left = tleft-175;

}

else

{

customdiv.style.left = tleft + 10;

}

if(document.body.clientHeight < 100)

{

customdiv.style.top = 25;

}

else if(ttop > document.body.clientHeight -55)

{

customdiv.style.top = ttop - 55;

}

else

{

customdiv.style.top = ttop + 10;

}

customdiv.style.visibility = 'visible';

}

function nd()

{

customdiv = document.getElementById("overDiv");

customdiv.style.visibility = 'hidden';

}

function b(v){window.status=v};

</script>

</head>

<body>

<p class="titurl" style=width:49%><a href='#' onMouseOver="return overlib('链接一内容...<br><font color=#3E82CD>http://www.hlj.net</font>');" onMouseOut="return nd();" target=_blank >链接一</a></p>

<p class="titurl" style=width:49%><a href='#' onMouseOver="return overlib('链接二内容...<br><font color=#3E82CD>http://www.hlj.net</font>');" onMouseOut="return nd();" target=_blank >链接二</a></p>

</div>

</body>

</html>