The basic principle is to use display, when Display:block, on display, when Display:none;
For example:
Copy Code code as follows:
#infobox span{Display:none;}
#infobox a:hover Span{display:block;position:absolute;}
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>zishu test tip</title> <style>/* zishu.cn * *{margin:0; li St-style:none; font-size:12px; line-height:1.8;} body{background: #333} #info {padding:50px} #infobox {padding:0px 20px;background-color: #640000;} #center {background: #ABBAAC; border-top:2px solid #333; padding:20px;} . c{clear:both height:1px overflow:hidden background: #333} #infobox li{border-right:1px solid #000; float:left in-right:1px; text-align:center;margin-top:-4px; } a{width:100px;line-height:28px; display:block;} A:link,a:visited{color: #000; background: #FF9900; text-decoration:none;} a:hover,a:active{color: #FFFF00; background: #000;} /* To be the content of the following display tip * * * #infobox span{Display:none;} #infobOx a:hover span{display:block;position:absolute;border:1px solid #640000; background: #FFFFCC; margin-top:26px! Important Margin-top:20px;color: #000;p adding:5px;white-space:nowrap;} </style> </pead> <body> <div id= "info" > <div id= "infobox" > <ul> <li> <span> From here can enter my homepage! </span> Home </li> <li><span> There are some English and jokes here! </span> English Jokes </li> <li><span> Here are some friends ' websites! </span> links </li> <li><span> you want to have something to say, come here! </span> message to me </li> <li><span> is self written and collected articles! </span> Technical Articles </li> <li><span> No, it's all in the diary! </span> Life Photos </li> </ul> <div class= "C" ></div> </div> <div id= "center" > </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]