纯CSS鼠标移动显示提示内容
纯CSS鼠标移动显示提示内容
最后更新于 2011-10-30 21:51:37 并被添加「代码 css」标签，已有 1507 位童鞋阅读过。
本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
/* BUBBLE TOOLTIP */
a.tt {cursor: help;}
.tt {
font-size: 11px !important;
font-weight: normal !important;
font-family: Arial, Helvetica, sans-serif !important;
text-decoration:none !important;
text-align: left;
}
.tt span { display: none; }
/*background:; ie hack, something must be changed in a for ie to execute it*/
.tt:hover { position:relative;text-decoration:none; z-index:1000; color: #aaaaff; background:transparent;}
.tt:hover span.tooltip {
color: #111;
display:block;
position:absolute;
top:0px; left:-10px;
padding: 15px 0 0 0;
width:200px;
text-align: left;
text-decoration:none;
z-index: 2000;
white-space: normal !important;
}
.tt.rightEnd:hover span.tooltip {
right: -20px; left: auto;
}
.tt:hover span.top {
display: block;
padding: 30px 8px 0;
background: url(images/bubble.png) no-repeat top;
}
.tt.rightEnd:hover span.top {
background: url(images/bubble-right.png) no-repeat top;
}
.tt:hover span.middle { /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(images/bubble_filler.png) repeat bottom;
}
.tt:hover span.bottom {
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(images/bubble.png) no-repeat bottom;
}
.tt .fakeLink {text-decoration: underline;}
</style>
<title>css</title>
</head>
<body>
onmouseover here
<span class="tt">
<img src="images/icon_tip.png">
<span class="tooltip">
<span class="top"></span>
<span class="middle">The root directory of your website is the directory where your home page is located.</span>
<span class="bottom"></span>
</span>
</span>
look it~!
</body>
</html>