1
私はストレートアップCSSホバーが、しかし、私は2の問題に遭遇しています持っていますそれは同じ場所、それは私が何度か試したし、それだけで勝った中央CSSツールチップのホバリング位置の問題
に直接その上に置いたので、それはサムネイルの位置に相対的でなければならないthumbnail-かかわらずにホバリングさ）
2）アップそんなことはありません。 元々私はそれを包み込んでいました...しかし、ツールヒント上のホバーがテキストリンクを必要とするので、それは不可能です。良い古い「あなたの中には問題がありません。したがって、私は使用しました。
上記の2つのポイントで強調表示されているように、この機能を行うには、CSS（好ましくは）またはHTMLで変更する必要があるものはありますか？ .tooltipがabsolute positionあるので
コード
<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>
のため、この記事を読んでいただきありがとうございます！これは理にかなっていますが、現在、ツールチップはサムネイルの下に表示され、右に移動します。 – iCeR
おっと！それを正しく読まなかった。 .tooltipwrapperのスパンに追加しました。 ：Dありがとう – iCeR