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

发布时间：2018-08-26 01:43:02 所属栏目：编程来源：站长网

导读：烈火网(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>
提示：可修改后代码再运行!

（编辑：核心网）

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

把not in 更换成not e	mydumper工具运用介绍
别花冤枉钱买专栏了！	Mysql索引类型创建错误