CSS动态的链接提示
CSS实现动态的链接提示,带动画效果,当然,这不光是CSS的功劳,JavaScript也用上了,当你把鼠标放到文字上的时候,你就会看到一行提示文字出现的效果了。
CSS实现动态的链接提示,带动画效果,当然,这不光是CSS的功劳,JavaScript也用上了,当你把鼠标放到文字上的时候,你就会看到一行提示文字出现的效果了。
答案:<html>
<head>
<title>动态的链接提示</title>
<STYLE type=text/css>
.article {
BACKGROUND-COLOR: #ffcc00; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 3px; POSITION: absolute; VISIBILITY: hidden
}
A:hover {
COLOR: #c0c0c0; TEXT-DECORATION: underline overline
}
.drop {
FILTER: dropshadow(color=000000, offx=1, offy=1, positive=1)
}
.drop2 {
FILTER: dropshadow(color=ffffff, offx=1, offy=1, positive=1)
}
</STYLE>
<SCRIPT language=JavaScript1.2>
<!--
function Show(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "visible";
divid.filters.revealTrans.play();
}
function Hide(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
}
//-->
</script>
</head>
<body>
<div align="center"><a href="#" onMouseOver=Show(ccc) onMouseOut=Hide(ccc)>ASP是什么语言呢?</a>
</div>
<div id="ccc" class="article">这里是您的提示内容</div>
<div align="center"><a href="#" onMouseOver=Show(ddd) onMouseOut=Hide(ddd)>PHP是什么呢?</a>
</div>
<div id="ddd" class="article">注意到了吗?随机动态提示</div>
<div align="center"><a href="#" onMouseOver=Show(eee) onMouseOut=Hide(eee)>ASP.NET又是什么呢?</a>
</div>
<div id="eee" class="article">随机动态提示</div>
</body>
</html>
上一个:Js制作网页上反复显隐的文本
下一个:洒脱飘动的文字