最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
鼠标悬停tip效果如何用css实现？
时间：2008-01-11 编辑：简简单单 来源：一聚教程网
鼠标悬停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; } |
|
| 代码如下 | 复制代码 |
相关文章
- css实现tips小提示效果代码 06-26
- 利用javascript或css实现表格隔行变色的方法 08-03
- css+javascript 定义控制input边框与背景 05-08
- javascript div css 可拖动层 03-22
- css 漂亮的tip效果 08-13
- 在CSS中插入javascript 01-26