
ツールチップの中にリンクを置きたいと考えています。
以下HTMLとscriptご参照ください。
テキスト「hoge」をマウスオーバーすると、その下のp.tooltipが表示されるイメージです。
ですが、「hoge」からマウスが離れると、tooltipが消えてしまい、
中のリンクを触ることができません。
(当然ながら…なのですが)
何か良い方法で、ツールチップの中のリンクをクリックする方法はありますでしょうか?
tooltipにマウスがある時はmouseoutイベントが起動しない…みたいな。
そもそも無理なのでしょうか?
詳しい方、ご教授いただけたら大変、助かります。
どうぞ宜しくお願いいたします。
■HTML
<p class="link">hoge</p>
<p class="tooltip">
ダミーダミーダミー
<a href="#test">testへ</a>
</p>
■script
$('p.tooltip').hide();
$('p.link').mouseover(function(){
$('+ p.tooltip',this).slideDown();
}).mouseout(function(){
$('+ p.tooltip',this).slideUp();
});
No.1ベストアンサー
- 回答日時:
どのような文脈やCSSで使う予定なのかが不明ですが、
自前でマウスの範囲をチェックして処理を変えるようにしても良いのでしょうけれど、それrなりに面倒なので、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. …
<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のままでいてくれるなんて。
勉強になりました。
スクリプトも書いていただき、分かりやすい解説でご親切に教えていただいたことを
大変感謝します。
自分でも実装し、期待通りにできました!
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
SELECT要素の垂直位置
HTML・CSS
-
HTMLフォームのSELECTの幅を一定にするためには?
HTML・CSS
-
CSS:span 改行させるには?
その他(コンピューター・テクノロジー)
-
4
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
5
マウスオーバーでリンク先サムネイル表示
JavaScript
-
6
【HTML】ツールチップを強制的に非表示にする方法
JavaScript
-
7
スマホでツールチップを表示したい
gooブログ
関連するQ&A
- 1 jQuery toolsで、ツールチップを設置しようとすると、
- 2 jQueryでページ内リンクに誤差が出る。
- 3 JQueryタブの切替 タブからタブへリンクさせたい
- 4 jquery rel要素を以下のソースで使用したい
- 5 jQueryを使用して以下のようなコードを作成しましたが、submit
- 6 jquery1.4で画像とリンクの切り替えを行おうとしています。
- 7 【jQuery】ページ内リンクの設定で、同ページ内クリックでメニューを閉じる方法
- 8 jQuery UI Accordion Plugin(jQuery U
- 9 jQuery ReStableでリンクが消える
- 10 ふきだし型のツールチップがIEだと