草窟设计 » CSS模拟html的'title'和'alt'的提示效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>超链接鼠标移上去提示-css模拟title和alt的提示效果</title>
 
<style>
 
.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}
 
.info:hover {background:#eee;color:#333;}
 
.info span {display: none }
 
.info:hover span {display:block;position:absolute;top:30px;left:60px;width:130px;
 
border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
 
</style>
 
</head>
 
<body>
 
<a class='info' href="http://www.domain.net">http://www.domain.net<span>css-特效展示，有实例参考哦-我们学习网欢迎大家来学习< /span></a>
 
<a class='info' href="http://www.domain.net">www.domain.net<span>我们学习网欢迎大家来学习</span></a>
 
<a class='info' href="http://www.domain.net">www.domain.net<span>我们学习网欢迎大家来学习</span></a>
 
<a class='info' href="http://www.domain.net">www.domain.net<span>我们学习网欢迎大家来学习</span></a>
 
<a class='info' href="http://www.domain.net">www.domain.net<span>我们学习网欢迎大家来学习</span></a>
 
</body>
 
</html>

效果：

css模拟title和alt的提示效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>超链接鼠标移上去提示-css模拟title和alt的提示效果</title> <style> .info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;} .info:hover {background:#eee;color:#333;} .info span {display: none } .info:hover span {display:block;position:absolute;top:30px;left:60px;width:130px; border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;} </style> </head> <body> <a class='info' href="http://www.domain.net">http://www.domain.netcss-特效展示，有实例参考哦-我们学习网欢迎大家来学习</a> <a class='info' href="http://www.domain.net">www.domain.net我们学习网欢迎大家来学习</a> <a class='info' href="http://www.domain.net">www.domain.net我们学习网欢迎大家来学习</a> <a class='info' href="http://www.domain.net">www.domain.net我们学习网欢迎大家来学习</a> <a class='info' href="http://www.domain.net">www.domain.net我们学习网欢迎大家来学习</a> </body> </html>

提示：你可以先修改部分代码再运行。