例として、ソーシャルサービスのアイコンが作成されました。アイコンにカーソルを合わせると、これらのサービスの名前が表示されます。
それでは始めましょう。
サービスの順序なしリスト：
<ul class="tt-wrapper"> <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li> <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li> <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li> <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li> <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li> </ul>
アイコンのメインスタイルとその配置の追加スタイル。
.tt-wrapper li a{ display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; background: transparent url(../images/icons.png) no-repeat top left; position: relative; } .tt-wrapper li .tt-gplus { background-position: 0px 0px; } .tt-wrapper li .tt-twitter{ background-position: -68px 0px; } .tt-wrapper li .tt-dribbble{ background-position: -136px 0px; } .tt-wrapper li .tt-facebook{ background-position: -204px 0px; } .tt-wrapper li .tt-linkedin{ background-position: -272px 0px; } .tt-wrapper li .tt-forrst{ background-position: -340px 0px; }
要素内では、透明度をゼロに設定した後、ツールチップを非表示にし、「上昇」速度を0.3に設定します。 最初の例では、ツールチップが上部に表示されるため、アイコンの100ピクセル上に配置します。
.tt-wrapper li a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: 'Alegreya SC', Georgia, serif; font-weight: 400; font-style: italic; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.3); text-indent: 0px; border-radius: 5px; position: absolute; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); transition: all 0.3s ease-in-out; }
外観は、アイコンの上にマウスを移動したとき、またはツールチップ自体が配置されている場所にカーソルを移動したときに発生します。 ポインタは、前後に擬似要素を使用して作成され、小さな影のある三角形になります。
.tt-wrapper li a span:before, .tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1); } .tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #fff; }
ホバーすると、ツールチップでブロックの透明度が0.9に上がり、外観の境界線が設定されます。
.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px; }
これは簡単な方法です。 デモには他にも3つの例があります。 ソースはここからダウンロードできます 。
残念ながら、例は擬似要素と遷移プロパティをサポートするブラウザでのみ機能します。