質問: jquery ツールチップの中のリンク ツールチップの中にリンクを置きたいと考えています。 以下htmlとscriptご参照ください。 テキスト「hoge」をマウスオーバーすると、その下のp.tooltipが表示されるイメージです。 ですが、「hoge」からマウスが離れると、tooltipが消えてしまい、 中のリンクを触ることができません。 (当然ながら...なのですが) 何か良い方法で、ツールチップの中のリンクをクリックする方法はありますでしょうか? tooltipにマウスがある時はmouseoutイベントが起動しない...みたいな。 そもそも無理なのでしょうか? 詳しい方、ご教授いただけたら大変、助かります。 どうぞ宜しくお願いいたします。 ■html hoge ダミーダミーダミー testへ ■script $('p.tooltip').hide(); $('p.link').mouseover(function(){ $('+ p.tooltip',this).slidedown(); }).mouseout(function(){ $('+ p.tooltip',this).slideup(); });
回答: どのような文脈やcssで使う予定なのかが不明ですが、 自前でマウスの範囲をチェックして処理を変えるようにしても良いのでしょうけれど、それrなりに面倒なので、tooltip部分をlinkの子要素になるようにしておいて、mouseenter、mouseleaveで制御するのが簡単ではないでしょうか。 下の例ではmouoseenterなどのかわりにhober()を利用しています。 マークアップを少し変えてありますが、 test span.tooltip{ display:block; } $(function(){ $('.tooltip').hide(); $('p.link').hover( function(){ $('.tooltip',this).slidedown(); }, function(){ $('.tooltip',this).slideup(); }); }); hoge ダミーダミーダミー testへ fuga ダミー2ダミー2ダミー2 test2へ