CSS怎么实现鼠标悬停tip效果

发布时间：2021-08-04 23:34:51 作者：chen
来源：亿速云阅读：420

这篇文章主要介绍“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效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！

CSS怎么实现鼠标悬停tip效果

相关阅读