We usually use the title or alt of the image directly, but this default effect is very ugly. Next I will introduce you to a good jQuery tips information tip effect, for more information, see.
First load the jQuery library file:
| The Code is as follows: |
Copy code |
<Script type = "text/javascript" src = "jquery. min. js"> </script> |
The following is the core jQuery code:
| The Code is as follows: |
Copy code |
$ (Document). ready (function (){
$ (". Menu a"). hover (function (){
$ (This). next ("em"). animate ({
Opacity: "show ",
Top: "-75"
}, "Slow ");
}, Function (){
$ (This). next ("em"). animate ({
Opacity: "hide ",
Top: "-85"
}, "Fast ");
});
}); |
The HTML code is as follows:
| The Code is as follows: |
Copy code |
<Ul>
<Li> <a href = "#">... </A> <em style = "top:-85px; display: none;">... </Em> </li>
<Li> <a href = "#">... </A> <em style = "top:-85px; display: none;">... </Em> </li>
<Li> <a href = "#">... </A> <em style = "top:-85px; display: none;">... </Em> </li>
</Ul> |
Complete instance
| The Code is as follows: |
Copy code |
<! 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 = UTF-8">
<Title> Animated Menu Hover 1 </title>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){ $ (". Menu a"). hover (function (){
$ (This). next ("em"). animate ({opacity: "show", top: "-75"}, "slow ");
}, Function (){
$ (This). next ("em"). animate ({opacity: "hide", top: "-85"}, "fast ");
});
});
</Script>
<Style type = "text/css">
Body {margin: 10px auto; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif ;}
. Menu {margin: 100px 0 0; padding: 0; list-style: none ;}
. Menu li {padding: 0; margin: 0 2px; float: left; position: relative; text-align: center ;}
. Menu a {padding: 14px 10px; display: block; color: #000000; width: 144px; text-decoration: none; font-weight: bold; background: url (images/button.gif) no-repeat center ;}
. Menu li em {background: url (images/hover.png) no-repeat; width: 180px; height: 45px; position: absolute; top:-85px; left:-15px; text-align: center; padding: 20px 12px 10px; font-style: normal; z-index: 2; display: none ;}
</Style>
</Head>
<Body>
<Ul class = "menu">
<Li> <a href = "#"> Web Designer Wall </a> <em> A wall of design ideas, web trends, and tutorials </em> </li>
<Li> <a href = "#"> Best Web Gallery </a> <em> Featuring the best CSS and Flash web sites </em> </li>
<Li> <a href = "#"> N. Design Studio </a> <em> Blog and design portfolio of WDW designer, Nick La </em> </li>
</Ul>
</Body>
</Html>
|
