Css实现鼠标悬停提示文字信息的效果

发布时间：2018-09-09 09:19:53 所属栏目：编程来源：站长网

导读：猛火网(LieHuo.Net)教程鼠标悬停提醒笔墨信息的结果，一样平常来说实现这种结果都必要javascript来实现，本日给各人的是一个纯CSS的例子，各人可以研究一下，首要是操作了css中的display:none和属性。 HTMLHEADstyle type=text/css/*Tooltips*/.tooltips{posi

　　猛火网(LieHuo.Net)教程鼠标悬停提醒笔墨信息的结果，一样平常来说实现这种结果都必要javascript来实现，本日给各人的是一个纯CSS的例子，各人可以研究一下，首要是操作了css中的display:none和属性。

<HTML> <HEAD> <style type="text/css"> /*Tooltips*/ .tooltips{ position:relative; /*这个是要害*/ z-index:2; } .tooltips:hover{ z-index:3; background:none; /*没有这个在IE中不行用*/ } .tooltips span{ display: none; } .tooltips:hover span{ /*span 标签仅在 :hover 状态时表现*/ display:block; position:absolute; top:21px; left:9px; width:15em; border:1px solid black; background-color:#ccFFFF; padding: 3px; color:black; } </style> </HEAD> <BODY> <a class="tooltips" href="#tooltips" title="liehuo.net">这就是Tooltips<span>正是你见到的，这些附加的声名笔墨是在鼠标颠末的时辰表现。</span></a> <br/><br/><br/><br/><br/> </BODY> </HTML> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE