Question

我想制作像这样的信息框：

Answer 1

该特定网站使用jQuery fadeIn和fadeOut来显示工具提示的图像（实际的png），如下所示：

$('.toggle').hover(
        function(){
            $('#baloon').fadeIn('normal');
        }, function() {
            $('#baloon').fadeOut('normal');
});

使用css固定定位将图像放在方框上方：

position: fixed;
margin-left: X px;
margin-top: Y px;

使用html可以实现类似的结果，定位div而不是图像。

Answer 2

你只需要CSS ...

CSS：

a:link,
a:visited {
position:relative;
text-decoration:none;
}

a .tooltip img {
border:none;
}

.tooltip {
width:300px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:15px;
font-family:Verdana,sans-serif;
font-size:15px;
font-weight:normal;
font-style:normal;
text-align:left;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
line-height:1.5;
border:solid 1px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
-moz-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
-webkit-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
}

.tooltip:before,
.tooltip:after {
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
}

.tooltip:before {
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}

/* hover */

a:hover .tooltip {
text-decoration:none;
visibility:visible;
opacity:1;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}

CSS颜色方案类：

.tooltip.green {
color:#445400;
background:#8DB600;
background:-moz-linear-gradient(top,rgba(141,182,0,0.8),rgba(141,182,0,1));
background:-webkit-gradient(linear,left top,left bottom,from(rgba(141,182,0,0.8)),to(rgba(141,182,0,1)));
border-color:#7C9902;
}

用法：

<a href="#">bistre<span class="tooltip green">THIS IS A TOOOOOLTIPP!!!/span></a>

使用javascript和CSS制作信息框

2 个答案: