当前位置:编程学习 > JS >>

CSS动态的链接提示

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制作网页上反复显隐的文本
下一个:洒脱飘动的文字

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,