ワイズリマインダー

jQueryとcssでバルーンを作る

<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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください