jQueryでポップアップの中にポップアップ
<html>
<head></head>
<style type="text/css">
.popup { position:absolute;bottom:0;left:0;width:300px;padding:1px 5px;border:solid 1px #000;background:#fff;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.b').live({ /* <= bind? */
mouseenter:function(){
var target = $( $(this).children().filter('.c').attr('href') );
$(this).css('position','relative');
$(this).append('<div class="popup">'+target.html()+'</div>');
},
mouseleave:function(){
$(this).css('position','static');
$(this).children().filter('div').remove();
}
});
});
</script>
<body>
<div id="a1"><p>a1a1a1</p></div>
<div id="a2"><p>a2a2<span class="b"><a href="#a1" class="c">#a1</a></span>a2</p></div>
<div id="a3"><p>a3<span class="b"><a href="#a2" class="c">#a2</a></span>a3a3</p></div>
</body>
</html>
このような感じで、#a2にマウスカーソルを合わせたらid="a2"の内容が吹き出しのような感じでポップアップし、
その中に含まれる#a1にマウスカーソルを合わせたらそこからさらにid="a1の内容がポップアップする仕組みを作りたいのですが、
ポップアップの上にマウスカーソルを合わせることができずに困っています。
参考：jQuery の hover() について調べたことのまとめ
http://d.hatena.ne.jp/tilfin/20080615/1213608859
参考：.live()でhoverイベントに複数の関数をバインドできない
http://jsdo.it/cancer6/mh9t
自分で調べてみて分かったことは
・hover(fn1,fn2)はfn1=mouseover,fn2=mouseoutではなくfn1=mouseenter,fn2=mouseleave
・後から追加した要素(ポップアップ)の中の要素にもhoverを有効にするにliveでhoverを設定する必要がある
・liveでhoverイベントを指定するときはmouseenter,mouseleaveの2つに分けて指定する必要がある
上記のコードを保存して見ていただけると分かると思うのですが、
liveにするとポップアップの上にカーソルを合わせることができず、
bindにするとポップアップの上にカーソルを合わせることができます。
ポップアップはclass="b"の子要素となるようにしているので、
ポップアップにマウスカーソルが合わさっている状態＝class="b"からmouseleaveしてない状態となっていると思うのですが…。
どのようにすれば「後から追加された要素(ポップアップ)」内にもhoverイベントを適用させつつ、
「後から追加された要素(ポップアップ)」内にマウスカーソルを乗せられる状態にできますか？
よろしくお願い致します。
お礼
おお～！！ このサイトはほかにも大変有用なコードがたくさんありますね。 大変助かりました。 ありがとうございます。