マウスを動かすとhtmlページにツールバーが表示されます（twitterにツイートしたときと同様）

Question

私のウェブサイトでは、ユーザーが返信先にカーソルを合わせると、ツールバーにオプションを表示します。ツイッターでツイートの上にマウスを乗せたときと似た機能です。どうすればこれを実現できますか？

ありがとう

Answer 1

は、ここで私が試した、単純なHTML/CSSのモックアップだ...

HTML：

<div class="container"> 
    Testing text! 
    <div class="tooltip">Here's a tooltip</div> 
</div> 
<div class="container"> 
    Testing text! 
    <div class="tooltip">Here's a tooltip</div> 
</div> 
<div class="container"> 
    Testing text! 
    <div class="tooltip">Here's a tooltip</div> 
</div> 

CSS：

.tooltip { display: none; } 
.container { width: 300px; height: 50px; margin: 10px 0px; border: 1px solid #000; } 

.container:hover > div.tooltip { display: block; } 

jsFiddle

T彼のアイデアは、あなたのコンテンツを保持している他のdiv内にあなたのツールチップのdivが含まれているということです。このツールチップのデフォルトのdisplayはnoneに設定されています。次に、CSS .container:hover > div.tooltip { display: block; }があります。「コンテナクラスを上に置いたときに、ツールチップのクラスを持つdivの子はdisplay: blockに変更されます。これはJavascriptでも非常に簡単に行えますが、探しているもので十分です。これが助けて欲しい！