Home >Web Front-end >HTML Tutorial >css实现的当鼠标悬浮弹出说明层效果_html/css_WEB-ITnose
css实现的当鼠标悬浮弹出说明层效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:27:281462browse
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="/"><span>前端网站</span>蚂蚁部落</a></div><div><a class="alt" href="/"><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/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html 5新特性 用SVG绘制的微信logo_html/css_WEB-ITnoseNext article：CSS3实现的将英文单词首字母设置为大写_html/css_WEB-ITnose