css マウスオーバーで吹き出し
2013/01/06
マウスオーバーでちょこっとしたヘルプを表示したい。
考え方はマウスオーバー時に、非表示していたものを表示させる。
手っ取り早くするなら、aタグ内にspanタグをいれる。
spanタグを非表示にしておいて、aタグのマウスオーバーで表示させる。
表示される場所をとりあえず、対象の右下あたりに表示させるためにpositionを使う。
<a href="#">ヘルプ<span>説明</span></a>
HTMLは上記のような感じ。CSSは下記のような感じ。
span{
display:none;
position:absolute;
top:10px;
left:10px;
}
a:hover{
position:relative;
top:0;
left:0;
}
a:hover span{
display:block;
color:#333;
background:#eee;
padding:3px;
border-top:#fff solid 10px;
border-left:#333 solid 5px;
}
display:none;
position:absolute;
top:10px;
left:10px;
}
a:hover{
position:relative;
top:0;
left:0;
}
a:hover span{
display:block;
color:#333;
background:#eee;
padding:3px;
border-top:#fff solid 10px;
border-left:#333 solid 5px;
}
とりあえずできるけど、operaとかだとマウスアウト時の再描画で中途半端な状態になるので、おススメはできない。