XHTML CSS应用教程——利用CSS实现的字符放大
这个例子的思路是最值得学习的，第一次见到这个例子的时候以为是用JavaScript做的。代码及简要分析:由于代码过长，用省略号代替了基本重复的部分。
<style type="text/css">
#container {font-family:"courier new", monospace; position:relative;
width:500px; height:25em; margin:0 auto;}
#tabl a:visited, #tabl a {text-decoration:none; color:#000;
float:left; padding:0 8px;}
#tabl a span {display:none;}
#tabl a:hover {text-decoration:none; color:#c00; background:#fff;}
#tabl a:hover .sym {display:block; width:150px; position:absolute;
top:60px; left:340px; font-size:150px; font-weight:bold; background:transparent;
color:#c00; text-align:center; border:1px solid #000; background:#fff;}
#tabl a:hover .cod {display:block; width:150px; position:absolute;
top:0; left:340px; font-size:20px; font-weight:bold; background:transparent;
color:#080; text-align:center; border:1px solid #c00;}
#tabl a:hover .web {display:block; width:150px; position:absolute;
top:30px; left:340px; font-size:20px; font-weight:bold; background:transparent;
color:#008; text-align:center; border:1px solid #c00;}
#tabl a:hover .des {display:block; width:150px;
position:absolute; top:240px; left:340px; font-size:16px; font-weight:bold; background:transparent;
color:#000; text-align:center; border:1px solid #c00;}
#tabl {width:290px; position:relative; top:5px; left:0;}
</style> …… <div id="container">
<div id="tabl"> <a href="#"> <span class="sym"></span><span class="cod">&#032;</span> <span class="web"></span><span class="des">space</span></a> …… ……
</div>
</div>