html - ホバー効果でツールチップが表示されない

Answer 1

実際にアニメーションをトリガーするには、いくつかのコードが必要です。

以下の例では、を使用するためにを入れ子にし<span>ています。<a>:hover

<div class="wrapper">  
  <a href="#" class="show">
     Hover Me !
     <span class="tooltip">Hello ! This is tooltip....</span>
  </a>
</div> 

a:hover span {
    opacity:1;
}

http://jsfiddle.net/6RV5n/

編集：

これは同じ概念ですが、要素をネストしないように CSS 隣接兄弟セレクターを使用しています。

<div class="wrapper">
 <a href="#" class="show">Hover Me !</a>
 <span class="tooltip">Hello ! This is tooltip....</span>
</div>

a.show:hover + span.tooltip {
    opacity:1;
}

http://jsfiddle.net/7pT8Y/3/

CSS 兄弟セレクターは、古いバージョンの IEでは機能しない可能性があることに注意してください。

Answer 2

ユーザーが div ラッパーにカーソルを合わせているときにツールチップを表示する必要がある場合は、次の CSS を使用します。

.wrapper:hover > .tooltip{
    opacity: 1;
}

これをチェックしてください... http://jsfiddle.net/TsQB5/

[編集]

.tooltip{
     display:none;
 }

 .show:hover > .tooltip{
     display: block;
 }

これは問題を解決することができます..