CSS模拟html的’title’和’alt’的提示效果
Google AD
<!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的提示效果
相关文章
关于站长
Taobao AD
