这篇文章主要介绍“CSS怎么实现鼠标悬停tip效果”，在日常操作中，相信很多人在CSS怎么实现鼠标悬停tip效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS怎么实现鼠标悬停tip效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
鼠标悬停tip效果如何用CSS实现
鼠标悬停tip效果，是一个非常有用的功能，在页面布局受到局限的时候，我们不能往页面中添加过多的内容。而鼠标悬停tip效果，可以在鼠标移上去的时候有一个提示信息，我们可以将相关的信息放置在这个tip中，不影响页面美观而又能很好的传达信息。
我们用CSS可以实现这样的效果，其实这很简单，我们可以新建一个span或div，将之初始设置成：display:none，隐藏这一标签的内容。
当鼠标移上去的时候，我们将此内容显示出来。然后对其进行定位。就达到了鼠标悬停tip效果。
◆鼠标悬停tip效果实例CSS代码
ExampleSourceCode
a#tip{position:relative;left:30px;top:30px;} a#tip:link{text-decoration:none;color:#c00;display:block} a#tip:hover{text-decoration:none; color:#000;display:block} a#tipspan{display:none;} a#tip:hover#tip_info{ display:block; border:1pxdashed#c00; background:#fff; padding:1px; position:absolute; top:0px; left:120px; }◆鼠标悬停tip效果实例XHTML代码
ExampleSourceCode
<aidaid="tip"href="http://www.mb5u.com"> <spanidspanid="tip_info"> <imgsrcimgsrc="/uploads/divcss/logo3.gif" alt="www.mb5u.com"width="200"height="90"/> </span> </a>◆查看鼠标悬停tip运行效果
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>www.mb5u.com</title> <styletypestyletype="text/css"> body{font:normal14px宋体} a#tip{position:relative;left:30px;top:30px;} a#tip:link{text-decoration:none;color:#c00;display:block} a#tip:hover{text-decoration:none;color:#000;display:block} a#tipspan{display:none;} a#tip:hover#tip_info{ display:block; border:1pxdashed#c00; background:#fff; padding:1px; position:absolute; top:0px; left:120px; } </style> </head> <body> <aidaid="tip"href="http://www.mb5u.com" _fcksavedurl="http://www.mb5u.com"> <spanidspanid="tip_info"><imgsrcimgsrc="/uploads/divcss/logo3.gif" _fcksavedurl="/uploads/divcss/logo3.gif"alt="www.mb5u.com" width="200"height="90"/></span> </body> </html>到此，关于“CSS怎么实现鼠标悬停tip效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
