$(function () {
$('span').hover(function() {
$(this).next('p').show();
}, function(){
$(this).next('p').hide();
});
});
#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: " ";
}
<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>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.