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

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

jQuery

$(function () { $('span').hover(function() { $(this).next('p').show(); }, function(){ $(this).next('p').hide(); }); });

吹き出しのCSSはcssarrowpleaseを利用して生成。

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: " "; }

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をよく書いています。