CSS マウスオーバーで吹き出しを表示

CSSでマウスオーバー時にバルーンを表示

HTML,バルーンのCSSはjQuery版と同じ。

CSS

#menu div { position: relative; } .arrow_box { display: none; position: absolute; padding: 16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #333; color: #fff; } .arrow_box:after { position: absolute; bottom: 100%; left: 50%; width: 0; height: 0; margin-left: -10px; border: solid transparent; border-color: rgba(51, 51, 51, 0); border-bottom-color: #333; border-width: 10px; pointer-events: none; content: " "; } span:hover + p.arrow_box { display: block; }

HTML

<div id="menu"> <div> <span>メニュー1</span> <p class="arrow_box">ふきだし1</p> </div> <div> <span>メニュー2</span> <p class="arrow_box">ふきだし2</p> </div> <div> <span>メニュー3</span> <p class="arrow_box">ふきだし3</p> </div> </div>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。