css3 フワッとメニューでツールチップを出す方法 Byジェイコ@clubringo.com
- liをfloat:leftして横並びにする
参考サイトCSSだけで作るシンプルなネストメニュー
- aタグにposition: relativeにする、paddingも付ける（疑似要素の基準にする、liよりもaの方が基準にしやすい）
- 疑似要素":before" ":after"でツールチップを作って、opacity:0;で見えなくしておく
- aの":before" ":after"をposition:absolute
- aをdisplay:none;にするとtransformが効かない
- aにdata-h属性でツールチップの内容を書いておく
- aのbeforeのcontent:""の内容をattr(data-h)とする（iconfontのcontentと同じ）
参考サイト
意外と知らない!?CSSセレクタ20個のおさらい
- afterで三角を作る
参考サイト
- transitionでふわっと出るスピードを調整
- transformとtransform-originでhoverした時の出かたを調整
- aがopacity:0;のときtransform: scale(1,1)だと、見えない時もhoverしてしまう
- ので、rotateX(90deg)にするかscale(1,0)にする
参考サイト transform:rotate()