Js implements the text link hover prompt Method for animation effects, text link hover
This article describes how to use JavaScript to implement animation effects by hovering over text links. Share it with you for your reference. The specific implementation method is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> text link for JavaScript to achieve animation effects hover the mouse over the tip </title>
</Head>
<Body>
<STYLE type = "text/css">
<! --
. Article {
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); POSITION: absolute; VISIBILITY: hidden
; Background-color: # FFCC00; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px}
-->
</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>
<A href = "#" onMouseOver = Show (aaa) onMouseOut = Hide (aaa)> helping customers </a> </div>
<Div id = "aaa" class = "article"> helping customers </div> <br>
<A href = "#" onMouseOver = Show (bbb) onMouseOut = Hide (bbb)> Home of materials </a> </div>
<Div id = "bbb" class = "article"> Home Material </div> <br>
<A href = "#" onMouseOver = Show (ccc) onMouseOut = Hide (ccc)> Baidu search </a> </div>
<Div id = "ccc" class = "article"> Baidu search </div>
</Body>
</Html>
I hope this article will help you design javascript programs.