- ベストアンサー
jQueryツールチップ中のリンク表示方法とクリック可能な設定
- jQueryを使用してツールチップ内にリンクを表示し、クリック可能にする方法を教えてください。
- マウスオーバーすると表示されるツールチップ内のリンクをクリックする方法についてのアドバイスをお願いします。
- ツールチップ内のリンクをマウスオーバーしてクリックできるようにする方法について教えてください。
- mc0816
- お礼率94% (69/73)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どのような文脈やCSSで使う予定なのかが不明ですが、 自前でマウスの範囲をチェックして処理を変えるようにしても良いのでしょうけれど、それｒなりに面倒なので、tooltip部分をlinkの子要素になるようにしておいて、mouseenter、mouseleaveで制御するのが簡単ではないでしょうか。 下の例ではmouoseenterなどのかわりにhober()を利用しています。 マークアップを少し変えてありますが、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> span.tooltip{ display:block; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.tooltip').hide(); $('p.link').hover( function(){ $('.tooltip',this).slideDown(); }, function(){ $('.tooltip',this).slideUp(); }); }); </script> </head> <body> <p class="link">hoge <span class="tooltip"> ダミーダミーダミー <a href="#test">testへ</a> </span> </p> <p class="link">fuga <span class="tooltip"> ダミー2ダミー2ダミー2 <a href="#test2">test2へ</a> </span> </p> </body> </html>
お礼
ありがとうございます。 tooltip部分をlinkの子要素すれば、すごくシンプルにできるんですね。驚きです。 hover()というのを使えば、 要素内にある他の要素上にマウスカーソルが入った場合にも、 マウスはoutにならず、overのままでいてくれるなんて。 勉強になりました。 スクリプトも書いていただき、分かりやすい解説でご親切に教えていただいたことを 大変感謝します。 自分でも実装し、期待通りにできました！ 本当にありがとうございました。