ワイズリマインダー

jQueryとcssでバルーンを作る

2014.11.17

<div id="target">ここにマウスオーバー</div>
<div id="balloon"><div>吹き出し</div></div>

#balloon{
	position:absolute;
	top:-9999px;
}
#balloon > div{
	position:relative;
	top:0;
	left:0;
	background-color:#ddd;
	padding:5px 7px;
}
#balloon > div:after{
	content:'';
	border-bottom:10px solid #ddd;
	border-right:5px solid transparent;
	border-left:5px solid transparent;
	position:absolute;
	top:-9px;
	left:20px;
}

$(function(){
  $('#target').hover(function(){
    $('#balloon').css({
      'top':'XXXpx',
      'left':'XXXpx'
    });
  },function(){
    $('#balloon').css('top','-9999px');
  });
});

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。