0

私は CSS のプロではありませんが、学ぼうとしています。

この小さなサンドボックスが進行中です： ここに画像の説明を入力

基本的には、アイコンの上にカーソルを合わせると表示される追加の詳細を含むアイコンの集まりです。

私はこれを機能させるためにCSSをいじっていますが、これまでのところ不安定な動作をしています。コードはこちら

アイコンがホバーされたときに他のアイコンの位置を変更せずに開くように、リッチなツールチップを何とか真似できないかと思います。

基本デザインの変更を含め、どんなクリエイティブなアイデアも喜んで受け入れます。

私の目標は、CSS3 Transitions を使用してこれを達成することなので、JavaScript は最小限またはまったくないことが理想的です。

ありがとう！

4

2 に答える 2

2

たぶんあなたはhint.cssを使うことができます、それは純粋なcssツールチップです

http://kushagragour.in/lab/hint/

于 2013-02-04T16:08:00.977 に答える
0

Create CSS3 Tooltipを表示するにはチュートリアルが必要だと思います。メイン コードは次のとおりです。

<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>

.tooltip
{
 display: inline;
 position: relative;
}
.tooltip:hover:after
{
 background: #333;
 background: rgba(0,0,0,.8);
 border-radius: 5px;
 bottom: 26px;
 color: #fff;
 content: attr(title);
 left: 20%;
 padding: 5px 15px;
 position: absolute;
 z-index: 98;
 width: 220px;
}

.tooltip:hover:before
{
 border: solid;
 border-color: #333 transparent;
 border-width: 6px 6px 0 6px;
 bottom: 20px;
 content: "";
 left: 50%;
 position: absolute;
 z-index: 99;
}
于 2016-06-08T07:29:36.790 に答える