运行代码 缩小
汉王
HTML代码
复制 格式化 注释 注释 清空
放大
AخA
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5
<title>小框框链接提示</title>
6
<style type="text/css">
7
.tooltip {position: relative;}/*定义tooltip类的定位类型为相对*/
8
a.tooltip span {display: none;}/*定义tooptip类链接对象元素span显示为不显示*/
9
a.tooltip:hover span {/*定义鼠标放在链接元素上的显示*/
10
display: block;  /*显示块状*/
11
position: absolute; /*显示定位类型为绝对*/
12
top:1em; /*距离顶部1em*/
13
left:2em;/*距离左边距离2em*/
14
font-family: Arial, Helvetica, sans-serif;
15
font-weight: normal;
16
color: green;
17
background-color: lightgreen;
18
text-decoration: none;
19
height: auto;
20
width: 150px;
21
border: 1px solid green;
22
font-size: 12px;
23
}
24
a.tooltip:hover{/*这段就是奇怪的代码咯:设置鼠标放在链接上显示文字大小为100%*/
25
font-size: 100%;
26
}
27
-->
28
</style>
29
</head>
30
<body>
31
<p><a href="#" class="tooltip">今天去哪里玩儿?<span>名称:芝加哥<br>电话:1234565555</span></a></p></body>
32
</html>
CSS代码
复制 格式化 注释 注释 颜色 清空
放大
CSS代码...
x
 
1
JS代码
复制 格式化 注释 注释 清空
放大
JS代码...
xxxxxxxxxx
1
 
1
名称
CSS自定义的链接提示框,鼠标移上显示小框框
分类
表格图层
描述
一个链接提示框特效代码,基于CSS自定义的框框效果,把鼠标放在链接上的时候,链接就显示一个小方框,与默认的title标签是不一样的,这个可以自己布局需要显示的内容样式,比如在里面添加回车等,可重新排版,而title标签却不能,所以更...
收藏