The basic principle is to use display, when Display:block, to display, when Display:none, when it is not displayed;
For example:
Copy CodeThe code is 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; padding:0; list-s Tyle: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; margi n-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 display the contents of tip below */#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> <ul> <li><span> get access to my home page from here! </span> Home </li> <li><span> There are some English and jokes on the side! </span> English Jokes </li> <li><span> Here are some friends ' websites! </span> links </li> <li><span> If you have anything to say, come here! </span> give me a message </li> <li><span> is a self-written and collected article! </span> Technical Articles </li> <li><span> None of them are in the diary! </span> Life Photos </li> </ul> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
