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>
サンプル
