CSSでツールチップ
擬似クラス :hover を使えば、Javascriptなしでもツールチップが作成可能。
IEを無視できないときは、a:hover で。
IEはほっといてよければ、なんにでも :hover で。
ある要素の中の要素を、通常は隠しておいて、:hover のとき見せるようにすると、ツールチップの出来上がり。
position: relative; で位置の指定に一工夫。
<style> a.tt {position: relative;} a.tt span {display:none;} a.tt:hover span { display:block; width: 200px; padding:5px; position: absolute; top: 1.5em; left: 2em; text-decoration: none; border: solid 2px #666699; background-color: #ffffcc; color: #000066; } a.tt:hover, a.tt:hover span {z-index:1;} </style> <a href="#" class="tt">softelメモ<span>ソフテルの技術系ブログです。</span></a>とは
使用例
softelメモphp、javascript、linux 等について書き綴っているソフテルのブログです。とは
softelメモ毎日更新です。毎日更新です。毎日更新です。毎日更新です。毎日更新です。毎日更新です。毎日更新です。毎日更新です。毎日更新です。とは
z-indexを変えるようにしないと、ツールチップが下になってしまったので、追加。
コメント