イメージ/リンク/別のdivの上にマウスを置いた後にDIVを表示するにはどうすればいいですか？

Question

私は以前これをしていましたが、悲しいことに私は忘れました。私はシンプルなCSSでやったので、javascriptやjqueryは使用しないでください。私が望むのは、Aが表示され、BがAの上にマウスを置いたときに表示されることです。

また、もし可能であれば、あなたが私にこのようにする方法を教えた後に、隠しdivのアニメーション？あなたがAの上にマウスを置くと、Bがスライドしますか？

Answer 1

IE6では動作しないいくつかの純粋なCSSがあります。これは、リンクとボックス（#tooltip）の両方にコンテナ#outerをラップしています。もちろん、実際のアプリケーションでは、おそらく絶対配置を使用してボックスを配置する必要があります。

#tooltip { 
    display: none; 
} 

#outer:hover #tooltip { 
    display: block; 
} 

そしてHTML（try it）：アニメーションのために

<div id="outer"> 
    <img src="http://www.google.com/images/logos/ps_logo2.png"> 
    <div id="tooltip">Hello, world!</div> 
</div> 

CSS3アニメーションのためのブラウザのサポートは現在、かなり貧弱なので、あなたはjQueryのまたは別のJSライブラリを使用してオフに最適です。