鼠标悬停tip效果如何用css实现？
发布时间：2020-05-26 编辑：jiaochengji.com
教程集为您提供鼠标悬停tip效果如何用css实现？等资源，欢迎您收藏本站，我们将为您提供最新的鼠标悬停tip效果如何用css实现？资源
鼠标悬停tip效果，是一个非常有用的功能，在页面布局受到局限的时候，我们不能往页面中添加过多的内容。而鼠标悬停tip效果，可以在鼠标移上去的时候有一个提示信息，我们可以将相关的信息放置在这个tip中，不影响页面美观而又能很好的传达信息。
应用div css布局，我们用CSS可以实现这样的效果吗？其实这很简单，我们可以新建一个span或div，将之初始设置成：display:none，隐藏这一标签的内容。（关于display可以参考这里）当鼠标移上去的时候，我们将此内容显示出来。然后对其进行定位。就达到了鼠标悬停tip效果。
鼠标悬停tip效果实例 CSS代码
| 代码如下 | 复制代码 |
| 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#tip span {display:none;} a#tip:hover #tip_info { display:block; border:1px dashed #c00; background:#fff; padding:1px; position:absolute; top:0px; left:120px; } | |
| 代码如下 | 复制代码 |
| <a id="tip" href="http://">【】 <span id="tip_info"> <img src="/upimg/20070505/11N303A514022551.jpg" alt="" width="200" height="90" /> </span> </a> | |
您可能感兴趣的文章：
鼠标悬停tip效果如何用css实现？
使用jquery hover事件实现表格的隔行换色功能示例
jQuery 列表自动循环滚动鼠标悬停时停止滚动的实现代码(图文)
用CSS控制输入框input样式，悬停交互如何实现？
JS悬浮移动窗口(悬浮广告)的特效代码
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
jQuery 打造动态渐变按钮 详细图文教程
CSS3实现鼠标悬停提示气泡效果
js 隔行变色与鼠标悬停自动变色的实现代码
css3实现鼠标悬停动态特效
上一篇：关于条件注释的几个实例代码
下一篇：巧用CSS自定义网页下划线样式
[关闭]