你的位置:首页 > 网页设计

[网页设计]css实现的当鼠标悬浮弹出说明层效果

css实现的当鼠标悬浮弹出说明层效果:
本章节分享一段代码实例,它是使用纯css实现的鼠标悬浮弹出说明层效果。
代码实例如下:

<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style>div{ clear:both; margin:5px 0 0 0; font-size:12px; line-height:22px;}a.alt{ position:relative; background-color:#fff; float:left; width:158px; height:20px; margin:0 auto; border:1px solid #eee; text-align:center; text-decoration:none; color:#0066cc;}a.alt:hover{ background:#fff; text-decoration:none; z-index:2;}a.alt span{ display:none;}a.alt:hover span{ position:absolute; display:block; top:-1px; left:158px; width:130px; height:30px; border:1px solid #eee; z-index:1;}</style></head><body><div><a class="alt" href="http://www.cnblogs.com//"><span>前端网站</span>蚂蚁部落</a></div><div><a class="alt" href="http://www.cnblogs.com//"><span>网址是softwhy.com</span>antzone</a></div></body></html>

在默认状态下span元素是隐藏的,当鼠标悬浮的时候,下面的CSS代码就会立马生效:

a.alt:hover span{ position:absolute; display:block; top:-1px; left:158px; width:130px; height:30px; border:1px solid #eee; z-index:1;}

采用绝对定位的方式,将这个弹出层定位于链接的右侧。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18143

更多内容可以参阅:http://www.softwhy.com/divcss/