CSS工具提示悬停位置问题

问题描述：

我有一个直线上升的CSS悬停，但是，我遇到两个问题：CSS工具提示悬停位置问题

1）徘徊太远时，它应该出现的只是缩略图右上方（居中高达）
2）徘徊在同一个地方，无论哪个thumbnail-所以它直接盘旋在它上面的中心

我试过好几次，它只是赢得了应该是相对于缩略图位置没有预算。原来我把它包裹在一个...但是，这是不可能的，因为工具提示悬停需要在其中的文本链接..好老，'你不能有一个'的问题。所以我用过了。

为了使这个功能在上述2点中突出显示，必须改变CSS（最好）或HTML中的内容？

代码

<html> 
<head> 
<style type="text/css"> 
a:link, 
a:visited { 
position:relative; 
text-decoration:none; 
} 

a .tooltip img { 
border:none; 
} 

.tooltip { 
width:100px; 
position:absolute; 
bottom:100%; 
margin:0 0 7px 0; 
padding:15px; 
font-weight:normal; 
font-style:normal; 
text-align:CENTER; 
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 */ 

span.tooltipwrapper: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; 
} 



/* POSITIONS */ 

/* LEFT */ 

.tooltip, 
.tooltip.left { 
left:0; 
right:0; 
} 

.tooltip:before, 
.tooltip:after, 
.tooltip.left:before, 
.tooltip.left:after { 
left:40px; 
right:auto; 
} 


/* CENTER */ 

.tooltip.center { 
left:50%; 
right:auto; 
margin-left:-65px; 
} 

.tooltip.center:before, 
.tooltip.center:after { 
left:50%; 
right:auto; 
} 


/* RIGHT */ 

.tooltip.right { 
left:auto; 
right:0; 
} 

.tooltip.right:before, 
.tooltip.right:after { 
left:auto; 
right:40px; 
} 

.tooltip.right:before { 
margin-right:-2px; 
} 


/* SPEECH BUBBLE */ 

.speechbubble { 
position:relative; 
left:auto; 
right:auto; 
bottom:auto; 
margin:0 0 12px 0; 
cursor:text; 
display:block; 
visibility:visible; 
opacity:1; 
} 


/* COLORS */ 

/* APPLE GREEN */ 

.tooltip.applegreen { 
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; 
} 

.tooltip.applegreen:before { 
border-top-color:#7C9902; 
} 

.tooltip.applegreen:after { 
border-top-color:#8DB600; 
} 
</style> 
</head> 
<body> 
rollover images for larger view<br /> 
<span class="tooltipwrapper"> 
<img src="http://i3.kym-cdn.com/entries/icons/original/000/000/015/orly.jpg" alt="" width="20" height="20" /> 
<span class="tooltip center applegreen"> 
<img src="http://i3.kym-cdn.com/entries/icons/original/000/000/015/orly.jpg" alt="" width="80" height="80" />O RLY?<br/><a href="http://i3.kym-cdn.com/entries/icons/original/000/000/015/orly.jpg">Link to image</a> 
</span> 
</span> 
<span class="tooltipwrapper"> 
<img src="http://thumbs.myopera.com/sz/colx/drlaunch/albums/37656/no-wai001.jpg" alt="" width="20" height="20" /> 
<span class="tooltip center applegreen"> 
<img src="http://thumbs.myopera.com/sz/colx/drlaunch/albums/37656/no-wai001.jpg" alt="" width="80" height="80" />NO WAI!!!<br/><a href="http://thumbs.myopera.com/sz/colx/drlaunch/albums/37656/no-wai001.jpg">Link to image</a> 
</span> 
</span> 
</body> 
</html>

答

给position:relative您.tooltipwrapper DIV因为.tooltip是absolute position。像这样写：

.tooltipwrapper{ 
position: relative; 
}

阅读本文的详细http://css-tricks.com/absolute-positioning-inside-relative-positioning/

谢谢！这是有道理的，但现在工具提示显示在缩略图下面，以悬停在右侧？ – iCeR 2012-03-01 05:16:38

哎呀！没有正确阅读。我将它添加到.tooltipwrapper的跨度中...现在都已修复！：D谢谢 – iCeR 2012-03-01 05:20:59

CSS工具提示悬停位置问题

相关推荐