当前位置:Gxlcms > html代码 > css实现的当鼠标悬浮弹出说明层效果_html/css_WEB-ITnose

css实现的当鼠标悬浮弹出说明层效果_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:57人阅读

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

    蚂蚁部落 
前端网站蚂蚁部落
网址是softwhy.comantzone

在默认状态下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/

人气教程排行