相关文章
当前位置：主页 > 网站制作 > 查看页面
CSS的仿title和alt的效果
代码如下：
<!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=gb2312" />
<title>CSS的title、alt效果</title>
<style>
.test{ position:relative; color:#0000cc; text-decoration:none; font-size:12px;}
.test:hover{ background:none;}
.test span { display: none;}
.test:hover span{ display:block; position:absolute; top:20px; left:8px; width:108px; height:12px; border:1px solid #ccc; background:#fff; color:#000; padding:5px; text-align:left; font-size:12px;}
</style>
</head>
<body>
<a class="test" href="#">链接一<span>css的title,alt效果</span></a>
<a class="test" href="#">链接二<span>css的title,alt效果</span></a>
</body>
</html>