We will see that some websites have a small title or alt effect when we refer to the connection or image. Next I will introduce you to the quick implementation of beautiful webpage Title prompts using jquery, for more information, see.
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 = gbk"/> <Title> Animated Menu Hover </title> <Script type = "text/javascript" src = "jquery. 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 { 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 = "/"> www. bKjia. c0m </a> <Em> material sharing and design! </Em> </Li> <Li> <A href = "/"> www. bKjia. c0m community </a> <Em> designer's communication community! </Em> </Li> <Li> <A href = ""> www. bKjia. c0m log </a> <Em> my www. bKjia. c0m, my magazine! </Em> </Li> </Ul> <Br/> </Body> </Html> |