-1

私のWebサイトでは、ユーザーが返信にカーソルを合わせたときにオプション付きのツールバーを表示したいと思います。Twitterのツイートにカーソルを合わせると同様の機能。どうすればこれを達成できますか。

ありがとう

4

1 に答える 1

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

アイデアは、コンテンツを保持する別のdiv内にツールチップdivが含まれていることです。このツールチップのデフォルトdisplayはに設定されていnoneます。.container:hover > div.tooltip { display: block; }次に、「コンテナクラスにカーソルを合わせると、ツールチップのクラスを持つdivの子が」に変わるというCSSがありdisplay: blockます。これもJavascriptで非常に簡単に実行できますが、探しているものにはこれで十分だと思います。これがお役に立てば幸いです。

于 2012-04-09T06:33:26.960 に答える